Vuex란?

Vuex는 Vue.js 응용 프로그램에 대한 상태 관리 패턴 + 라이브러리입니다.
대규모 프로젝트 개발을 할 때 구성 요소별로 공통으로 이용하는 데이터를 효율적으로
상태 관리를 가능하게 하는 라이브러리입니다.

초급편으로서 컴퍼넌트내에서 표시하는 곳까지를 이 기사로 기재합니다.

파일 디렉토리

-- views
     |
     -- Home.vue
-- store
     |
     -- index.js
--main.js

절차① Vuex 설치

npm install vuex

절차② main.js에 기술

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'// 追加

Vue.config.productionTip = false

new Vue({
  router,
  store, //追加
  render: h => h(App)
}).$mount('#app')

main.js에서 store를 사용할 수 있도록 추가합니다.

절차③ store 만들기

이번에는 store 폴더 바로 아래에 index.js를 만들고 그 안에서 상태 관리를하려고합니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 2 //状態を指定
  },
  getters: { //gettersには メソッドを記述
    doubleCount: state => state.count * 2, 
    tripleCount: state => state.count * 3
  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

이번에는 초기 값으로 state에 숫자 2.
getters안에는, 그것을 2배로 하는 메소드와, 3배로 하는 메소드를 기재하고 있습니다.

순서④ View로 표시하기

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <p>{{ tripleCount }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

export default {
  computed: {
    // * store.js から 状態を呼び込み
    count() {
      return this.$store.state.count
    },
    // * getters から関数を取得する
    doubleCount() {
      return this.$store.getters.doubleCount;
    },
    tripleCount() {
      return this.$store.getters.tripleCount;
    }
  },
  name: 'Home',
  components: {
    HelloWorld
  },
  methods: {
    increment(){
      this.$store.state.count++;
    },
    decrement(){
      this.$store.state.count--;
    }
  }
}

computed 속성 안에

    count() {
      return this.$store.state.count
    },

설명 여기에서 store의 state 값을 읽고 있습니다. 그리고 그것을 count로 부를 수 있도록하고 있습니다.

    doubleCount() {
      return this.$store.getters.doubleCount;
    },
    tripleCount() {
      return this.$store.getters.tripleCount;
    }

위의 두 가지에서는 getters로 작성한 2배로 하는 처리의 함수와 3배로 하는 함수를 여기에서
읽고 있습니다.

단지, 이 기술이라고 상당히 중복적이지요.

그것을 mapGetters를 사용하여 완벽하게 쓸 수 있습니다.

mapGetters

import { mapGetters } from 'vuex'
exportdefault {
  computed: {
    // ? オブジェクトの中に記載する場合はスプレッド演算子を使用する
    ...mapGetters(["doubleCount", "tripleCount"]),
  },

computed 프로퍼티안에 {}(객체형)으로 하는 것으로 복수치를 넣을 수 있도록(듯이) 하고 있습니다.

...mapGetters(["doubleCount", "tripleCount"])

배열 [] 안에 getters에 둔 함수를 여러 개 지정하는 것만으로 사용할 수 있습니다.