[vue2] 상태관리 vuex 사용 시 this.$store 가 undefined 뜨는 현상

상태관리와 Store

1. Store

• 컴포넌트끼리 데이터를 공유할 때 props나 event bus를 이용할 수 있지만 가장 효율적인 방법은 Store이다 (Vuex)
• 데이터를 Store에 담으면 프로젝트 내 컴포넌트에서 Store 에 담긴 데이터를 꺼내서 사용할 수 있다.

2. Vuex 설치 및 연결

• 설치

npm i vuex

• vuex는 프로젝트 내 package.json 의 dependencies에 들어가게 된다.

3. 프로젝트 세팅

• src/store 폴더 생성
• src/store/index.js 파일 생성

• src/main.js

 

• 사용할 컴포넌트 (ex. HelloWorld.vue)

 

그런데 간혹 아래와 vue2 버젼에서 this.$store를 사용 하려고 할 때 store가 인식 되지 않는 경우가 있습니다.

 

 

test 메소드를 실행 시켰지만 this.$store가 undefined

vue 개발자 도구에서도 vuex 위치가 보이지 않는다.

 

이 경우는 사용자가 vue2 버젼에서 vuex 4버젼 이상을 사용해서 일어나는 현상으로 vuex 4버젼은 vue3 버젼 에 서 vuex3 이하 버젼은 vue2 버젼에서 사용 가능하기 때문입니다.

 

What is Vuex? | Vuex

 

4. 해결방법

• pakage.json 내 vuex 버젼을 4 -> 3버젼으로 변경하거나. vue2 -> vue3 버젼으로 변경처리
• npm i vuex@3 으로 vuex 최초 설치 시 3버젼으로 받아온다.