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においた関数を複数指定するだけで、使用することができます。

Vuex の導入 / 使い方 mapGetters (初級編)