vue.js - Vuex 无法读取未定义的属性 'state'

Question

我是 Vue 的新手，我遇到了一个错误，不明白为什么以及如何解决这个问题。我在控制台中得到的错误是:Cannot read property 'state' of undefined

我正在使用 vue 版本 @vue/cli 4.5.12

这是我的文件:

ma​​in.js

import { createApp } from 'vue'

import App from './App.vue'
import router from './router.js'
import {store} from './store.js'

const app = createApp(App)

app.use(router, store)

app.mount('#app')

store.js

import { createStore } from 'vuex'

const store = createStore ({
    state() {
        return {
            socialIcons: {
                github: {
                    icon: "/../assets/images/Github.svg",
                    name: "Github",
                    link: "https://github.com/Roene"
                },
                linkedin: {
                    icon: "/../assets/images/LinkedIn.svg",
                    name: "Linkedin",
                    link: "https://www.linkedin.com/in/roene-verbeek/"
                },
                instagram: {
                    icon: "/../assets/images/Instagram.svg",
                    name: "Instagram",
                    link: "https://www.instagram.com/roeneverbeek/"
                }
            }
        }
    }
})
export default store

Home.vue

<template>
    <section class="home">
        <div class="title">
            <h1 class="nameTitle">{{name}}</h1>
            <h2 class="jobTitle">{{jobTitle}}</h2>
            <div class="icons">
                <div class="icon">
                    <a
                        target="_blank"
                        v-for="icon in socialIcons"
                        class="icon"
                        :href="icon.link"
                        :key="icon.name"
                    >
                        <span class="iconName">{{icon.name}}</span>
                        <img class="iconImage" :src="icon.icon" :alt="icon.name">
                    </a>
                </div>
            </div>
        </div>
        <div class="photo">
        </div>
    </section>
</template>

<script>
export default {
    data() {
        return {
            name: "Roene Verbeek",
            jobTitle: "Front-end developer",
            socialIcons: this.$store.state.socialIcons
        }
    }
}
</script>

谁能告诉我为什么会出现此错误以及如何修复此错误？

Answer 1

use 方法接受一个插件作为第一个参数和选项(可选)作为第二个app.use(plugin, itsOptions)，所以你应该这样做:

 import store from './store.js'// without {} since you did export default in your store
  ...
  app.use(router).use(store)

和socialIcons 必须是计算属性:

export default {
    data() {
        return {
            name: "Roene Verbeek",
            jobTitle: "Front-end developer",
            
        }
    },
computed:{
    socialIcons(){
          return this.$store.state.socialIcons
     }
}
}