Vuex无法读取未定义的属性“状态”

问题描述

我是 Vue 的新手，我收到一个错误，不明白为什么以及如何解决这个问题。 我在控制台中得到的错误是：无法读取未定义的属性“状态”

我正在使用 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>

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

解决方法

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
     }
}
}