#9-2. Nuxt.js에서 Store 기능을 이용해 볼까? - 모듈 모드 편

Nuxt.js Store기능의 본편이라고 말할 수 있는 "모듈 모드"를 이야기해볼까 한다.

사실 지난번 P.S에도 남겨놨듯 Nuxt.js는 버전 3을 기점으로 Store의 클래식 모드는 지원하지 않는다고 Warning 메시지를 표시하고 있다.

 

지금이야 뭐 쓸 수 있겠지만 곧 사라질 것이라는 점에서 우리는 모듈모드를 반드시 알아야만 할 것인데 사실 번외편 Vuex를 설명할 때 처럼 모듈모드가 막 어렵거나 하지 않으니 긴장할 필요는 없다. 왜냐하면 Nuxt.js가 알아서 잘 처리해주기 때문이다. 가만 보면 Nuxt.js 참 기특하다.

대견한 Nuxt.js를 바라보는 내 눈빛

일단 store/index.js 파일을 수정하자.

 

store/index.js

export const state = () => ({
    counter: 0
});

export const mutations = {
    increment (state) {
        state.counter++;
    }
}

이렇게 각각의 속성들(state, mutations, getters, actions)을 위와 같이 export 해주면 Nuxt.js는 "아, 네녀석 모듈모드로 Vuex를 사용하려는 게로구나!"하고 알아서 모듈모드로 동작한다.

클래식 모드 처럼 Vuex.Store의 인스턴스를 export 해주지 않아도 괜찮다.

 

그리고 Nuxt.js에서의 모듈 모드는 파일명으로 모듈 이름이 결정된다. 예를 들어서 todo.js 라는 이름으로 모듈을 하나 새로 만들자.

그리고 안에 이렇게 작성해 보자.

 

store/todo.js

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

export const mutations = {
    add: (state, text) => {
        state.counter++;

        var item = {
            id: state.counter
            , title: text
            , done: false
        };

        state.list.push( item );
    },
    remove: ( state, todo ) => {
        var list = state.list;
        list.splice( list.indexOf(todo), 1)
    },
    toggle: ( state, todo ) => {
        todo.done = !todo.done
    }
}

아, 참고로 이 코드는 Nuxt.js의 Vuex Store 파트에 있는 코드를 기반으로 그대로 사용한 부분도 있고 내 입맛대로 고쳐쓴 부분이 있으니 알아보기 힘들거든 Nuxt.js 가이드 문서를 찾아보기 바란다.

 

일단 최대한 ES2016의 기능들을 사용해서 코딩을 했고 전개연산자도 함깨 사용했으니 알아보기 힘들거든 MDN에 있는 전개연산자 파트를 읽어보기 바란다.

(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

 

암튼 위의 코드를 보면 모듈을 지정하거나 한게 아니라 state, mutations를 그저 선언하고 내용을 채웠다. 내용은 Vuex 번외편을 읽어보면 어떤 내용들인지 바로 이해를 할 것 같으니 따로 설명하진 않겠다.

 

위와 같이 store/index.js와 store/todo.js를 코딩을 하면 index.js를 루트 모듈로 잡고 todo.js 내용을 서브 모듈로 분류하여 내부적으로 적용한다. 그냥 js 파일 만들어서 각 옵션들을 export 해주면 Nuxt.js는 알아서 모듈을 셋팅해 적용시켜준다. 어머나 세상에.

 

pages/index.vue

<template>
    <section class="container">
        <ul>
            <li v-for="item in todos" v-bind:key="item.id">
                <input type="checkbox" :checked="item.done" @change="toggle(item)" />
                <span :class="{done: item.done}">{{item.title}}</span>
                <button @click="remove(item)">지우기</button>
            </li>
        </ul>
        <p>
            <input type="text" placeholder="할 일을 적으셈" v-model="todoTitle" @keyup.enter="addTodo" />
            <button @click="addTodo">입력</button>
        </p>
    </section>
</template>
<script>
import {mapMutations} from 'vuex';

export default {
    data: function() {
        return {
            todoTitle: ''
        };
    },
    computed: {
        todos () {
            return this.$store.state.todo.list;
        }
    },
    methods: {
        addTodo () {
            this.$store.commit('todo/add', this.todoTitle);
            this.todoTitle = '';
        },
        ...mapMutations({
            toggle: 'todo/toggle'
            , remove: 'todo/remove'
        })
    }
}
</script>
<style>
.done {
    text-decoration: line-through;
}
</style>

자, 그럼 modules를 셋팅했으니 그걸 사용하는 방법에 대해서 배워봐야하는데... 사실 이거 번외편에서 설명했던거 외에 mapMutations와 같은 헬퍼를 사용한 정도가 새롭다고 하겠다. 내가 이거 코딩하면서 몰랐는데 mapMutations는 전개연산자로 표현해야 오류가 안나더라. 저 앞에 "..." 이게 나는 말줄임인줄 알고 빼고 적용하다가 계속 오류가 나서 뭔가 해서 봤더니 저게 바로 전개 연산자라는 이름의 연산자였다니 놀람.

 

암튼 mapMutations 헬퍼는 선언되어있는 mutations를 맵을 통해 연결시켜주는 역할을 한다. 그래서 methods의 toggle을 실행하면 결과적으로 toggle과 연결되어있는 store에 있는 'todo/toggle'을 실행하게 된다. todo는 todo모듈을 의미한다.

 

위의 코드를 실행하면 아래와 같이 동작하는 화면을 확인할 수 있다.

 

이로써 Vuex Store의 모듈 기능을 Nuxt.js에서 사용할 수 있게 되었다. 뭐 조금 더 공부를 해야 잘 써먹을 수 있을것 같긴하나 그건 개인의 노력여하에 맡기도록 하겠다. 왜냐하면 우리는 이제 Nuxt.js에서 axios를 활용한 비동기 데이터를 적용하는 것을 알아볼 것이기 때문이다.

 

우리는 라우터, Store를 배웠고 비동기 데이터를 로드하는 것, 그리고 컴포넌트를 사용하는 법만 배우면 우리는 Nuxt.js를 활용하여 게시판 같은걸 만들어볼 수 있을거다. 그때까지 조금만 더 힘내보자.

 

오늘은 여기서 끝!

 

안녕!