Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법

Vuex에서 Cannot read property 'state' of undefined 해결법을 다뤄보고자 한다.

 

Vuex에서

"this.$store.state.데이터" 부분에서 오류가 발생하는데 해결법은 간단하다.

 

Vue와 Vuex 연결을 해주지 않은 것이다.

 

Vue 최상위 컴포넌트, 그러니까  .Vue 파일 중에 제일 처음 시작하는 파일에

import store from "./store"; 한 줄을 추가해준다.

 

최상위 컴포넌트는 main.js를 보면 알 수 있다.

그리고 Vuex 저장소를 store.js 파일에 했을 때 저렇게 하면 된다.

(안해봐서 되는지는 모르겠지만 만약에 다른 js파일에 저장했다면 아마도 그 이름을 입력하면 될 것이다)

 

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

 

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