티스토리 뷰

드디어 돌고 돌아서 Nuxt.js 에서 Store의 기능에 대해서 이야기할 수 있게 되었다니!

지난 computed, Vuex 관련 포스팅들, 동기 / 비동기 관련 포스팅까지 머릿속에 스쳐 지나가며 Nuxt.js에 대해 아련함과 감동이 느껴질 정도다.

크흡 간신히 돌아왔다. Nuxt.js!

앞에서 진행한 번외편 Vue.js 강좌들은 모두 Nuxt.js의 Store 기능을 위한 Vuex 라이브러리 관련 강좌였다. 도대체 Store 기능이 무엇이고 Vuex가 무엇이고 이것을 사용하려면 어떻게 써야 하는지에 대하여 알아보는 시간이었다면 오늘은 Nuxt.js에서 Store 기능을 사용하는 방법에 대해서 알아보는 시간을 갖도록 하겠다.

 

앞서 만들었던 starter-template로 Nuxt.js 프로젝트를 잘 보면 store 디렉토리가 있는 것을 확인할 수 있을 거다.

이 디렉터리가 있다면 Nuxt.js는 "네 녀석 Vuex를 사용하는구먼!"이라며 알아서 세팅해준단다. 알아서 해주는 게 많아서 참 다행이다. 번외 편처럼 날로 Vue.js 에 Vuex를 적용하려면 이것저것 작업해줬어야 했는데 개발자에게 뭐가 필요한지 잘 알고 있는 Nuxt.js 구만 하고 생각했다. 일단 store 디렉터리에 index.js 파일을 생성하자.

 

일단 Nuxt.js는 클래식 모드의 Store기능과 모듈 모드 두가지를 이용할 수 있다. 클래식 모드는 Vuex.Store 객체를 인스턴스로 만들어 Store 기능을 사용하는 것이고 모듈 기능은 "번외"편 마지막에서 이야기했던 것처럼 사용처에 맞게 모듈별로 저장소를 따로 만들어 관리하는 기능인데 오늘은 클래식 모드에 대해서만 알아보도록 할 거다. 

(모듈 모드는 내용이 많아서 따로 뺐다.)

 

아까 store 디렉터리에 만든 index.js에 아래와 같이 코딩하자.

store/index.js

import Vuex from 'vuex';

const store = () => new Vuex.Store({
    
})

export default store

이렇게 Vuex.Store의 인스턴스를 export 해주는 것만으로도 Store 기능을 사용할 수 있게 된다.

 

여기에 state나 mutations, actions, getters들을 넣어주면 우리가 "번외"편에서 작성한 것과 같은 Vuex 기능을 사용할 수 있게 된다. 간단하게 카운터 기능을 올리는 코드를 넣어보자.

store/index.js

import Vuex from 'vuex';

const store = () => new Vuex.Store({
    state: {
        counter: 0
    },
    mutations: {
        increment: (state) => {
            state.counter++
        }
    }
})

export default store

위의 코드처럼 내용을 추가했다면 이제 pages/index.vue 파일을 열어서 아래처럼 수정해보자.

 

pages/index.vue

<template>
  <section class="container">
    <div>
      <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
    </div>
  </section>
</template>

이렇게 수정했다면 버튼을 클릭할 때마다 숫자가 올라가는 카운터 버튼이 만들어졌을 거다.

 

뭔가 굉장히 허탈한 기분이 드는데 이걸 좀 더 풀어서 코딩을 하자면 아래와 같이 코딩할 수 있다.

 

pages/index.vue

<template>
  <section class="container">
    <div>
      <button @click="onBtnClick">{{ counter }}</button>
    </div>
  </section>
</template>
<script>
export default {
    computed: {
        counter () {
            return this.$store.state.counter
        }
    },
    methods: {
        onBtnClick() {
            this.$store.commit('increment');
        }
    }
}
</script>

이렇게 풀어서 코딩하니까 눈에 들어오는가? 아주 간단하게 store 객체를 활용할 수 있음을 확인 할 수 있다. 다음 시간에는 Nuxt.js Store기능의 모듈 모드에 대해서 배워보도록 하겠다.

 

오늘은 짧게 여기까지!

 

안녕!

 

 

P.S : 참고로 클래식 모드는 Nuxt.js 버전 3부터는 없어질 예정이라고 하니 오늘 배우는 클래식 모드는 혹여나 예전 버전의 Nuxt.js를 손대야할 때 당황하지 말라는 의미에서 포스팅 한 것이니 본격적으로 Store기능을 배우는건 다음 모듈 모드를 읽어주기를 바란다.

댓글
댓글쓰기 폼