Vuex 설치 및 등록

- Vuex는 ES5와 ES6 2가지 방식으로 설치 할 수 있다.  ES6로 진행하겠다.

 

npm install vuex --save

ES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음.. 더 쉽게 코딩이 가능함

• 2022년 2월 7일부터 Vuex 라이브러리를 설치할 때 아래와 같이 라이브러리 버전을 명시해야 한다.

고 하는데 나는 그냥 된다..? 또 바뀐거 같다.

vuex 버전 확인 방법

npm list vuex

 

https://v3.vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

 

설치 후 컴포넌트 폴더 레벨과 같이 store 폴더를 만든다.

그리고 안에 store.js를 만들어 준다.

 

store.js

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

이렇게 하면 코어 라이브러리 2개를 다운을 받은 것이다. npm인스톨로 등록한게 package.json 저장이 되고

NodeModules 에 라이브러리로 잡히는데 그 라이브러리를 들고온 것이다.

 

package.json

 

nodemodules

 

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

Vue.use(Vuex);

Vue.use는 플러그인을 사용하는 부분인데 

공식문서에도 똑같이 되어있다. 

Vue.use는 전역으로 글로벌로 쓰고 싶을 때에 사용하는 부분이다.

 

만약 이렇게 해주면 이제

this.$store

이런 식으로 어디서든 접근이 가능해 진다.

 

등록을 위해 export를 작성해준다.

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

Vue.use(Vuex);

export const store = new Vuex.Store({
    //
})

참고로 내 버전 (vuex@4.1.0) 에서는

import { createStore } from "vuex";

export const store = createStore({
    state: {
        headerText : 'sfad'
    }
})

이렇게 하면 사용이 가능해진다.

 

 

main.js에 등록

import { createApp } from 'vue'
import App from './App.vue'
import {store} from './store/store'

createApp(App).use(store).mount('#app')