반응형
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
반응형
'sourcecode' 카테고리의 다른 글
char**argv를 사용할지 char*ar*argv[]를 사용할지 여부 (0) | 2022.08.16 |
---|---|
vue 및 multer를 사용한 Axios 다중 업로드 (0) | 2022.08.16 |
Vue 및 Vuex를 사용하여 Firebase 인증이 작동하지 않음 (0) | 2022.08.16 |
Java Array List 복사 (0) | 2022.08.16 |
Windows 의 C 에 디렉토리가 존재하는지 어떤지를 확인하려면 어떻게 해야 합니까? (0) | 2022.08.16 |