파일 구조

main.js

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


const app = createApp(App);
app.use(store);
app.mount('#app');

module 만들기

1. modules 폴더 안에 xxxStore.js로 만든다

2. xxxStore 파일에 namespaced: true로 설정해주기

   • xxxStore.js 파일형식

     const xxxStore = {
       namespaced: true,
       state: () => ({
     		test: 'test입니다'
       }),
       mutations: {},
       getters: {},
       actions: {},
     };
     
     export default xxxStore;

   • namespaced를 사용하면 getters, mutation, action을 부르는 방법이 달라지는 데 알아보기 쉽게 변한다.
     • state: state.**moduleName**.stateName
     • getters: computed(() => store.getters["**moduleName**/getterName"])
     • mutation: store.commit("**moduleName**/mutationName", params)
     • action: store.dispatch("**moduleName**/actionName", params)

3. index.js파일의 modules에 xxxStore추가

   import Vuex from 'vuex';
   
   // 작성한 모듈을 가져오기
   import xxxStore from '@/store/modules/xxxStore.js';
   const store = new Vuex.Store({
     modules: {
       // 키 : 값 형태로 저장됨
       xxxStore,
     },
   });
   export default store;

component에서 사용하기

• xxxView.vue

1. import { useStore } from 'vuex';
   • useStore
     • vuex4에서 부터 생김 useStore 훅을 사용하여 store에 접근할 수 있음
2. const store = useStore();
3. state, getter, mutation, action 사용하기
   • state는 기존대로 state.**moduleName**.stateName으로 부릅니다.
   • getters는 computed(() => store.getters["**moduleName**/getterName"])으로 부릅니다.
   • mutation은 store.commit("**moduleName**/mutationName", params)으로 부릅니다.
   • action은 store.dispatch("**moduleName**/actionName", params)으로 부릅니다.

<template>
  <div>
		<span>{{test}}</span>
  </div>
</template>

<script>
import OnlySmallLogoTopNav from 
import { useStore } from 'vuex';
export default {
  name: 'xxxView',
  setup() {
    const store = useStore();
		const test = store.state.xxxStore.test;

    return {
      test,
    };
  },
};
</script>

<style></style>

---

Getting Started | Vuex

vue3에서 vuex 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable, module, composition-api

vue3 에서 vuex4 시작하기 - module 관리

Vue 3 변경점 정리: 무엇이 바뀌나요?