Vue.js Vuex无法读取属性'；州'；未定义的

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

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

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

store.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')

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>

{{name}}
{{jobTitle}}
导出默认值{
数据（）{
返回{
姓名：“Roene Verbeek”，
职位名称：“前端开发人员”，
社会党人：这个。$store.state.socialIcons
}
}
}

---

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

使用

方法将一个插件作为第一个参数，并将选项（可选）作为第二个
应用。使用（插件，其选项）
，因此您应该：

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