Vuex 설치하고 등록하기

Vuex 설치

1. 터미널에 명령어 입력

- 설치 시 버전을 명시해야하니 사용하는 vue 프로젝트 환경과의 호환성을 잘 확인 할 것.

> cd [설치경로]
> npm i vuex@3.6.2 --save

PS C:\Users\kim\Desktop\learnVue\PFV> cd .\todo\
PS C:\Users\kim\Desktop\learnVue\PFV\todo> npm i vuex@3.6.2 --save

added 1 package, and audited 951 packages in 1s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2. 설치 되었는 지,

package.json파일 내 dependencies에서 확인하자.

"dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vuex": "^3.6.2"
  },

 

3. Components와 같은 레벨에서 store 폴더 생성. 그리고 그 하위에 store.js 파일 생성

src > store > store.js

import Vue from 'vue' 
import Vuex from 'vuex'

Vue.use(Vuex);
//플러그인 광역 적용 

//export 적용했기 때문에 main.js에서 import 가능해짐
export const store = new Vuex.Store({

});

 

src > main.js

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/store'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

 

참고 자료 

Vue 3으로 변경된 환경과, 그에 따른 설치 버전명시에 관한 블로그 글 - 캡틴판교

설치 공식문서 v3.x