Vuex 无法读取未定义的属性 'state'

Question

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

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

这是我的文件：

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

Vuex 无法读取未定义的属性 'state'

Vuex Cannot read property 'state' of undefined

vue.js

vuex

vuejs3

vuex4

Vuex 无法读取未定义的 属性 'state'

Vuex Cannot read property 'state' of undefined

vue.js

vuex

vuejs3

vuex4

Vuex 无法读取未定义的属性 'state'