B.TIL 07 : Vuex

Vuex에 대해서

VueX는 Vue.js에 어플리케이션에 대한 상태 관리를 도와주는 라이브러리이다.
어플리케이션에 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를
변경하는 기능을 가지고 있다.

React에서 Redux가 존재하듯, Vue에는 VueX가 존재한다.

설치와 사용

npm install vuex --save

명령어를 통해 간단하게 최신버전의 Vuex를 설치 할 수 있다.
다만 주의할 점이 있는게, Vuex는 Promise를 필요로 한다. 그러므로 지원대상 브라우저가 아직 Promise를 구현하지 않았다면(예를 들어 IE), es6-promise와 같은 polyfill 라이브러리를 설치해야 한다.

사용예제

그럼 이전의 vue-ref 컴포넌트를 리팩토링하면서 데이터를 송수신하고 데이터를 버전관리 하는 법을 실행해보자.
우선 Vuex를 설치하고 다음과같이 상태관리를 하는 로직을 추가해야한다.

//store/index.js

import 'es6-promise/auto' [1]
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; [2]


Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState()], [3]
    state: {
        info: {  [4]
            name: '',
            age: '',
            job: ''
        }
    },
    mutations: { [5]
        setInfo(state, payload) {
            state.info = payload
        }
    },
}
);

[ 1 ] : 앞서 말한바와 같이 프로미스를 지원하지않은 하위버전의 브라우저들과의 호환성 문제해결을 위해 프로미스를 import 해준다.

[ 2 ] : (선택사항)새로고침시 데이터가 증발하는 것을 방지하기 위해 vuex-persistedstate 라이브러리를 install해서 import 해준다.

[ 3 ] : (선택사항) 실제로 Vue store에 적용하기 위해선 플러그인에 추가해줘야 된다.

[ 4 ] : store의 state에 존재하는 data다.
다른 컴포넌트에 존재하는 data와는 다른 스토어에서 통합적으로 관리되는 data다. 컴포넌트를 통해 치환하거나 변경해서 사용할 수 있다.

[ 5 ] : mutation을 통해 SetInfo메서드를 통해 commit되어오는 payload를 state에 존재하는 data에 업로드 시킨다.

//ref.vue

<template>
  <div class="info">
    <div class="input-box">
      <input
        class="name"
        ref="name"
        type="text"
        placeholder="이름"
        v-model="info.name"
      />
      <input
        class="age"
        ref="age"
        type="text"
        placeholder="나이"
        v-model="info.age"
      />
      <input
        class="job"
        ref="job"
        type="text"
        placeholder="직업"
        v-model="info.job"
      />
      <button class="check" type="button" @click="doCheck">확인</button>
    </div>
  </div>
</template>

<script>
import store from "../store/index.js"; [1]
export default {
  data() {
    return {
      info: {
        name: "",
        age: "",
        job: "",
      },
    };
  },
  methods: {
    sendInfo() {
      if (this.info.name && this.info.age && this.info.job) {
        store.commit("setInfo", this.info); [2]
      }
    },
    doCheck() {
      if (!this.info.name) {
        this.$refs.name.focus();
      } else if (!this.info.age) {
        this.$refs.age.focus();
      } else if (!this.info.job) {
        this.$refs.job.focus();
      } else if (this.info.name && this.info.age && this.info.job) {
        alert("모두 입력되었습니다!");
        this.sendInfo(); [3]
      }
    },
  },
};
</script>

기존의 코드가 단순하게 input처리와 alert를 구현한 것에서 메소드를 추가해 Vuex의 store에 데이터를 commit하는 로직이다.

[ 1 ] : 알맞은 경로에 위치한 store역할을 하는 store 디렉토리에 index.js를 import 한다.

[ 2 ] : sendInfo()라는 메서드를 통해 info라는 객체에 담긴 데이터들(이름, 나이, 직업)을 store에 커밋한다.

[ 3 ] : 실제 작동은 클릭이벤트를 통해 실행되는 doCheck()라는 메서드 후에 실행되게 된다.

//vuex.vue

<template>
  <div class="vuex-box">
    <div class="info-box">
      이름 : {{ info.name }} <br />
      나이 : {{ info.age }} <br />
      직업 : {{ info.job }}
    </div>
  </div>
</template>

<script>
import store from "../store/index.js";
export default {
  data() {
    return {
      info: {
        name: "",
        age: "",
        job: "",
      },
    };
  },
  methods: {
    getInfo: function () {
      const sInfo = store.state.info;
      if (sInfo.name && sInfo.age && sInfo.job) {
        this.info = sInfo; [1]
      }
    },
  },
  created() {
    this.getInfo(); [2]
  },
};

[ 1 ] : store.state에 현재 저장되어있는 info객체를 받아서 vuex 컴포넌트에 있는 data에 info에 갱신한다.

[ 2 ] : created를 통해 템플릿이 로드 될 때 자동으로 getInfo 함수가 실행 되게 된다.