티스토리 뷰

Nuxt.js에서 Store라는 기능을 이해할 필요가 있는데 그러기 위해서는 일단 Store가 무엇인지부터 알아야 한다.

Store는 어플리케이션 전역적으로 어떠한 상태 값을 저장해야할 때 그리고 그 상태를 전역적으로 반영해야할 때 Store 라고 부르는 저장소에 값을 저장한 뒤에 활용할 수 있도록 해주는 기능을 이야기한다.

 

Nuxt.js의 Store는 Vuex 라이브러리를 기반으로 만들어졌고 Vuex에 대해서 알아야 Store에 대한 설명을 이해하기 용이 하겠다 싶어서 선행학습을 진행하는 포스트로 꾸며보았다.

 

 

와 기대된다!

Vuex는 일단 ES2015을 기본 문법으로 사용한다. 그러니 일반적인 방법으로는 사용하기엔 조금 애매한 부분들이 있다. 그러니 샘플 페이지 만드는 작업부터 좀 설명해야겠다. 그러면 테스트 할만한 프로젝트를 만들자.

아참, 오늘은 Vue-CLI 환경에서 작업할거니까 Vue-CLI 가 필히 설치되어있어야한다.

Vue-CLI가 설치되어있지 않은 사람은 https://blog.thereis.xyz/61 여기를 들려서 Vue-CLI를 설치하고 돌아오자.

 

나는 프로젝트 이름을 vuex-sample 이라고 했다.

대충대충 옵션도 Default로 지정했다.

$ vue create vuex-sample

이렇게 설치가 완료되면 아래의 명령어를 입력하여 정상적으로 서비스가 올라오는지 확인하자.

$ npm run serve

잘 동작하는 것을 확인할 수 있다.

 

자 이제 Vuex를 한번 셋팅해보자.

$ npm install vuex --save
$ npm install es6-promise --save

이렇게 라이브러리 두개를 설치한다. Vuex는 promise를 지원해야하는데 혹여나 지원 못하는 브라우저가 있을까봐 es6-promise도 같이 설치해준다.

 

그런 담에 src/main.js 파일을 열어서 아래와 같이 수정해준다.

main.js 를 열어서

 

promise를 import해준다.

여기까지 했으면 혹시 본인이 ESLint를 사용하고 있는지 생각해보자. 만약 ESLint를 사용하고 있으면 기본셋팅에 console을 사용할 수 없게 되어있어서 package.json을 열어 셋팅을 수정해줘야한다.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
        "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

roles에 "no-console": "off"를 추가해주면 된다. 이것땜에 내가 얼마나 삽질을 했는지... 이걸 수정한 담에는 Vue 를 다시 실행해줘야하니 잊지말고 재시작하도록 한다.

 

여기까지 해줬으면 이제 App.vue 파일을 수정해주도록 하자.

<template>
  <div id="app">
    <button v-on:click="onBtnClick">클릭</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default {
  name: 'app'
  , methods: {
      onBtnClick: function(){
          store.commit('increment');
          console.log( store.state.count );
      }
  }
}
</script>

이렇게 수정을 해줬다면 한땀 한땀 설명을 해주겠다.

일단 제일 위에 vue와 vuex를 import해주고 "Vue.use(Vuex)" 명령을 넣어줬는데 이는 Vuex를 사용하겠다는 이야기를 Vue에게 미리 해주는거다.

 

그런 뒤에 store 객체에 인스턴스화 된 Vuex.Store 객체를 넣어주는데 이때 미리 사용할 상태값과 그 값을 어떻게 변하게 하는지 정의한다.

 

위의 코드는 Store객체를 이용하는 방법에 대한 아주 간단한 예를 보여주는데 state는 현재의 상태를 저장하는 객체, 그리고 mutations는 미리 설정된 state에 있는 값을 변경하기 위한 메서드를 제공하고 있다. 현재는 "increment"라는 함수를 제공하고 있고 이때 실행된 메서드는 "state" 객체를 파라미터로 할당 받는다.

 

그래서 버튼을 클릭할때 마다 onBtnClick 메서드를 호출하면서 store의 내장 메서드인 commit을 호출하는데 이때 mutations에 설정한 "increment"라는 함수명을 넘겨주면 해당 메서드가 실행되면서 state의 count 값이 1씩 증가한다는 것을 알 수 있다.

 

그런데 사실 이렇게 사용되는 Vuex는 우리가 알고있는 아주 기초적인 방법들을 통해서도 구현할 수 있는데 왜 별도의 라이브러리를 사용해서 Vuex를 사용할까?

 

그건 다음시간에 알아보자.

오늘의 목표인 Vuex 샘플 코딩을 위한 개발환경 만들기는 여기까지다.

 

안녕!

댓글
댓글쓰기 폼