Vue.js) Vue3.0에서 vuex 사용하기

Vue 3버전에서 vuex 사용하기

그냥 npm i vuex --save를하게 되면 vuex3.x 버전이 설치됩니다.

Vue3.x은 vuex4.x과 호환이 됨으로 기존의 버전은 삭제해줍니다.

npm uninstall vuex
npm install vuex@next --save

store/index.js

store.js를 만든후 createStore를 통해 store를 생성하자.

// /store.js
import { createStore } from 'vuex'

export const store = createStore ({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
})

main.js에 import합시다

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from "./store"; // store 등록!

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

 

어떤 컴포넌트에서도 사용할 수 있게 Gloabl 변수를 만듭시다.

//globalVer.js
import {store} from "./store"


export default {
    install(Vue) {
        Vue.config.globalProperties.$store = store
    }
}

 

Global 변수 자바스크립트 파일 import합시다.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from "./store"; // store 등록!
import gloablVer from "./globalver"; //global 변수 추가

createApp(App).use(router, store,globalVer).mount('#app')

 

다음은 원하고 싶은 곳에서 this.$store해서 사용하시면 됩니다.

 

도움되셨다면 하단의 광고버튼 클릭 부탁드립니다 :)