Nuxt.js 에서 Vue Store 모듈 나누기

최근 개인 프로젝트 진행 중 Nuxt에서 Vue Store를 모듈로 나누기 위해 많은 자료를 찾아봤지만 안타깝게도 

공식 문서에서는 자세히 정리가 안되있었습니다. 수많은 자료찾기, 다른 사람들의 프로젝트 참고하기 등을 통해 알게된

Nuxt에서 Vue Store를 모듈로 나누기에 대해서 알아보겠습니다.  

들어가기 전에 지극히 저의 개인적인 방식이며 더 좋은 방법, 옳은 방법이 있다면 댓글 달아주시면 감사하겠습니다.

 

1. 모듈로 나누는 이유

먼저, 왜 store를 모듈로 나누어야 하는지 알아보겠습니다.

export const state = () => ({
  list: []
})

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    })
  },
  remove(state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle(todo) {
    todo.done = !todo.done
  }
}

Nuxt 공식 홈페이지에 나오는 store 예제 코드입니다. 하나의 js 파일에 state, mutation, action, getter를 모두 작성하는 방식입니다.

이렇게 되었을 때의 단점은 스토어가 늘어갈수록 코드 관리가 쉽지 않다는 건데요.

조금만 관리할 state를 추가해도 파일이 길어지게 됩니다. 

그래서 저는 store가 늘어나는 경우와 각 store마다의 파일이 길어지는 걸 최대한 방지하기 위해 모듈로 나누기로했습니다.

 

2. 모듈로 나누는 방법

모듈로 나누는 방법은 아래의 블로그를 참조했습니다.

blog.woolta.com/categories/10/posts/132

module registration 패턴 으로 vuex 모듈 관리하기

nuxt에서는 store를 store 폴더에서 관리하게 되어있습니다.

store 폴더 안에 modules 폴더를 만들고 그 안에 모듈로 나눌 store들의 폴더를 만듭니다.

여기서는 test라는 store를 만들어 관리하지만 user, post 등등 store를 추가할 때마다 새로운 폴더를 만들면 됩니다.

test 폴더 안에 actions, getters, index, mutations, state 파일을 만들도록  하겠습니다.

각각의 내용은 아래와 같이 작성합니다.

state.js

export const USER = 'USER';

export default {
   [USER]: 'user',
};

actions.js

export default {};

getters.js

export default {
   user: ({ user }) => user,
};

mutations.js

import * as val from '../test/state';

export const SET_USER = 'SET_USER';
export default {
   [SET_USER](state, payload) {
      state[val.USER] = 'test';
   },
};

index.js

import { createNamespacedHelpers } from 'vuex';
import state from './state';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';

const NAMESPACE = 'test';

const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers(NAMESPACE);

export { NAMESPACE, mapState, mapGetters, mapActions, mapMutations };

export default {
	namespaced: true,
	state,
	getters,
	actions,
	mutations,
};

test 폴더 안의 파일들을 작성했습니다.

이제 store 폴더 안에 있는 index.js 파일을 작성하겠습니다.

index.js

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

Vue.use(Vuex);

// 모듈 폴더 안에 있는 각각의 store를 불러오는 작업
const files = require.context('./modules', true, /index.js$/);
const modules = {};
files.keys().forEach(key => {
	modules[files(key).NAMESPACE] = files(key).default;
});

export const store = () => {
   return new Vuex.Store({
      state,
      getters,
      mutations,
      actions,
      modules,
   });
};

export default store;

 

이제 간단히 테스트를 해보겠습니다.

page폴더 안에 todos.vue 파일을 생성합니다.

todos.vue

 

<template>
	<div>
		<div>{{ this.user }}</div>
		<ul>
			<li>
				<input placeholder="What needs to be done?" @keyup.enter="setUser" />
			</li>
		</ul>
	</div>
</template>

<script>
import * as test from '../store/modules/test';
import * as testActions from '../store/modules/test/actions';
import * as testMutations from '../store/modules/test/mutations';
import * as testState from '../store/modules/test/state';

export default {
	computed: {
		...test.mapState({
			user: state => state[testState.USER],
		}),
	},
	methods: {
		...test.mapMutations({
			setUser: testMutations.SET_USER,
		}),
	}
};
</script>

<style>
.done {
	text-decoration: line-through;
}
</style>

이제 nuxt를 실행해서 확인해보겠습니다.

모듈로 나눠놓은 store의 값이 잘 불러와지는 걸 확인할 수 있습니다.

이제 mutations의 동작이 잘되는지도 확인하겠습니다.

 

동작이 잘 되고있습니다.

이번 포스팅에서는 Nuxt에서 Vue Store 모듈 나누는 방법에 대해 알아보았습니다.

더 좋은 방법이 있거나 틀린 점이 있으면 지적해주시면 고치도록 하겠습니다! 감사합니다.