[Vuex state 에러] TypeError: Cannot read properties of undefined (reading 'state')

참고

https://www.inflearn.com/questions/509241/comment/183225 - 인프런

---

에러

state를 이용해 데이터 바인딩 시키려 했는데 자꾸 위와 같은 에러가 났다.

 

원인

스토어가 뷰 인스턴스에 연결되지 않아 발생한 오류였다.

 

해결

Vue 최상위 Root 파일(Vue 파일 중에 제일 처음 시작하는 파일)에 

import store from "./store"; 한 줄을 추가해주고,

루트 인스턴스에 store 등록을 해준다.

그리고 store.js 파일 윗 줄에 있는 import들 아래에 Vue.use(Vuex);  추가해주면 된다.

이러면 Vue와 Vuex 연결이 되고, $store를 사용하여 store에 접근 가능하다.

참고로 Vue 파일 구조는 아래와 같다.

Root Instance (main.js) <- 이 부분!

└─ 최상위 컴포넌트 (App.vue)

      ├─ 컴포넌트 A
      │      ├─ 컴포넌트 a

      │      ├─ 컴포넌트 b

      └─  컴포넌트 B

               └─  컴포넌트 c

-> 즉, 여기서 가장 Root가 되는 파일인 main.js의 뷰 인스턴스에 vuex를 연결해주면 된다.

 

오류메시지가 전부 사라졌다.