rerender by vuex store state - vue

vuex와 store

vuex의 store는
전역에서 참조 가능한 state data를 가질 수 있다.

하지만 이 data의 변화를 감지하고,
어떤 컴포넌트에서 rerender를 일으키려면,
해당 전역 data를 참조하여 return 하는 함수가 있어야 한다.
이 함수가 바로 vuex getters의 함수이다.

특정 컴포넌트에서 사용하고자 하는 특정 store data의 getter 함수를,
해당 컴포넌트의 computed에서 실행하여 값을 받아온다.

그러면 store 내부에서 data가 바뀌어도 감지를 하여,
해당 컴포넌트의 rerender 조건으로 사용할 수 있다.

아래의 예시는
store 내부 state 중,
mode 객체의 값에 대하여 변동이 있는 경우이다.

vuex의 구조

일반적으로 vuex의 구조는 내부에 사용하게 될 값이나 함수들이 많아질수록 다음과 같이 정리하여 사용하게 된다.

store folder
- store.js
- mutations.js
- actions.js
- getters.js

각 파일들은 주어진 명칭과 같이 각각의 역할을 지니고 있다.

이번 게시글에서는 store의 기능을 store.js 하나의 파일 내에서 확인한다.

store.js

먼저 vue와 vuex를 사용하기 위하여 import, use를 차례대로 입력한다.

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

Vuex.Store 생성자로 새로운 store를 만들어준다.

export const store = new Vuex.Store({
  state: {
    score: 0,
    bestScore: 0,
    quiz: null,
    error: "",
    mode: {}
  },

컴포넌트들이 원하는 state를 가져다 쓸 수 있게 getters 함수들을 선언해준다.

  getters: {
    getModeName: function(state) {
      if (state.mode === undefined) {
        return null;
      } else {
        if (state.mode.name !== undefined) {
          return state.mode.name;
        }
      }
    },
    getModeDifficulty: function(state) {
      if (state.mode === undefined) {
        return null;
      } else {
        if (state.mode.difficulty !== undefined) {
          return state.mode.difficulty;
        }
      }
    }
  }
});

component.vue

컴포넌트에서 vuex store를 활용하는 예시를 나타내었다.

1. template에서의 store state 사용
   state를 조건부 렌더링(v-if, v-else-if)의 조건값으로 사용하여,
   어떤 상태가 변함에 따라 렌더를 시킬지 말지 결정지을 수 있도록 한다.
   아래의 코드에서는
   modeName과 modeDifficulty 값의 존재 유무에 따라서 div 태그의 렌더가 결정된다.

   <template>
   <div class="root">
    <div v-if="display === false" class="intro">
      <img src="../assets/intro.example.jpg" height="506px" width="400px" />
    </div>
    <div v-else-if="display === true" class="word-chain">
      <div v-if="modeName === null">
        <div>기본모드</div>
        <div>반전모드</div>
      </div>
      <div v-else>
        <div v-if="modeDifficulty === null">
          <button class="levelButton">쉽게</button>
          <button class="levelButton">어렵게</button>
        </div>
        <div v-else>
          <span>Word-chain game</span>
          <Score />
          <ChatBubble />
          <Timer />
          <div>My Current Data Info : {{ currStoreState }}</div>
        </div>
      </div>
    </div>
   </div>
   </template>
   

2. store state 가져오기
   store에 존재하는 state를 가져오는 방법에 대해 기술하였다.

computed라는 지정된 속성의 값으로 불러오게 된다.
vuex store는 모든 컴포넌트에서 this.$store로써 참조가 가능하다.

그 중에서, 현재 원하는 state에 대해서만 해당하는 state를 가져올 수 있는 getters 함수로 가져오면 된다.
가져온 값은 computed 속성의 값으로 선언하여
컴포넌트 내부에서 선언한 data처럼 사용할 수 있게 된다.

<script>
import Score from "./common/Score.vue";
import ChatBubble from "./common/ChatBubble.vue";
import Timer from "./common/Timer.vue";

export default {
  name: "WordChainGame",
  components: { Score, ChatBubble, Timer },
  data() {
    return {
      display: false
    };
  },
  computed: {
    currStoreState() {
      return this.$store.state;
    },
    modeName() {
      return this.$store.getters.getModeName;
    },
    modeDifficulty() {
      return this.$store.getters.getModeDifficulty;
    }
  },
};
</script>