Vuex가 정의되지 않은 속성 '상태'를 읽을 수 없음

Vuex가 정의되지 않은 속성 '상태'를 읽을 수 없음

Vue를 처음 사용하는데 오류가 발생하여 이 문제를 해결할 수 있는 이유와 방법을 알 수 없습니다.콘솔에서 발생한 오류는 다음과 같습니다. 정의되지 않은 속성 '상태'를 읽을 수 없습니다.

vue 버전 @vue/cli 4.5.12를 사용하고 있습니다.

제가 가지고 있는 파일은 다음과 같습니다.

main.discloss.main.discloss.

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.displaces를 설정합니다.

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메서드는 첫 번째 매개 변수로 하나의 플러그인을 받아들이고 두 번째 매개 변수로 옵션(si 옵션)을 받아들입니다.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
     }
}
}

언급URL : https://stackoverflow.com/questions/67056563/vuex-cannot-read-property-state-of-undefined