[Vue-14]vuex 사용하기(state, mutation)

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

https://vuex.vuejs.org/kr/

http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/

Vue를 사용하다보면 생각보다 불편한 일이 많다.

바로 데이터 바인딩이다. 컴포넌트를 분리하면 분리할수록 더더욱 그렇다.

가령 특정 A컴포넌트의 변경을 B컴포넌트가 알 수 있을까?

자식 부모관계라면 알 수 있다.

그게 아니라면?? 자식 부모 관계를 체이닝해서 처리할 수 있다.

그런데 이러면 데이터 복제가 매우 일어나므로 성능상에서 좋다고 말하기는 힘들다.

그러므로 특정 변수를 전역변수처럼 사용할 수 있는 방법이 없을까??

그래서 존재하는게 바로 Vuex이다.

Vuex는 전역변수처럼 사용할 수 있는 store에 저장할 수 있는 저장소라고 할 수 있다.

잡설을 여기까지하고 사용법을 후딱 알아보도록하자. 설명 길면 짜증나니까.

일단 vue-cli를 통해서 프로젝트를 만들도록 하자. vue-cli는 전 포스팅을 참조하도록 하라.

보통 설치를 하면 위 처럼 vue와 vue-router로만 시작한다.

우리는 vuex를 사용할 것이므로 vuex를 설치하도록 한다.

npm install --save vuex

vuex를 설치하고 나면 사용하는 방법을 보도록 하자.

먼저 자동생성이 되면 위와같은 구조가 된다.

그러면 store라는 js파일을 만들어보자.

사실 파일을 따로 만들지 않아도 된다.

그러나 모듈화를 위하여 특별히 만들어보도록 하겠다.

/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
})

보통 Vuex를 사용하기 위해서는 Vue에 등록해야한다.

Vue.use(Vuex)

위 처럼 등록을 해준다.

보통의 경우 vuex는 두 가지의 상태를 본다. 물론 더 있지만 가장 중요한건 이 두가지이다.

state: {
  count: 0
},

state는 변수를 의미한다.

여러분이 변수를 저장하는 것은 state라고 생각하면된다.

다른 이름으로 저장해봐야 어짜피 읽을 수도 없다.

mutations: {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

mutations는 변수를 조작하는 함수를 의미한다.

특정 함수를 조작하고 싶다면 변수를 사용해야한다.

변수를 직접 전송하면 원하지 않는 사이드 이펙트가 생길수 있다.

<!--HelloWorld.vue-->
<template>
  <div class="hello">
    <b>count : {{this.$store.state.count}}</b><br>
    <input type="button" @click="increment()" value="increment"/>
    <input type="button" @click="decrement()" value="decrement"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  created: function () {
    console.log(this.$store)
  },
  methods: {
    increment: function () {
      this.$store.commit('increment')
    },
    decrement: function () {
      this.$store.commit('decrement')
    }
  }
}
</script>

<style scoped>
</style>

그럼 예제를 보도록 하자. 크게 보면 두가지 부분이 있다.

<b>count : {{this.$store.state.count}}</b><br>

변수를 사용하고 싶다면 this.$store로 접근해서 state의 변수를 가져온다.

this.$store.commit('increment')

특정 값을 변하게 하고싶다면 commit에 여러분이 쓸 함수를 적어준다.

만약 여러분이 mutaions을 commit하고 싶을 때 파라메터를 넘기고 싶을 수도 있다.

이 경우 아래처럼해주면된다.

this.$store.commit('increment', '!!!')

이 경우 받는 store쪽에서도 함수를 받게 바꿔줘야한다.

increment (state, payload) {
    state.count++
},

사용되지는 않았지만 이때 전달한 !!!는 payload라는 이름으로 파라메터로 들어가게된다.

물론 반드시 payload라는 이름을 쓸 필요는 없지만 보통 관습적으로 payload라고 불리게된다.

이제 테스트해보자.

※주의 사항

this.$store를 호출할때는 반드시 화살표 함수가 아닌 일반 함수로 해야한다.

화살표 함수와 일반함수는 작동방식이 다르므로 서로 다른 this를 호출하게된다.