【Vue.js】Vuexのstateを変えるような処理はmutation・commitで行う #JavaScript

はじめに

仕事で使う事になったので1からVue.jsについて学んだ。
ちゃんと覚えておかないとまずそうな事を備忘録として1つ1つ残しておく。

Vuexのstateを変えるような処理はmutation・commitで行う

Vuexとは

Vuexは言うなればグローバル変数のようなもので、Vueのプロジェクトが大きくなった時にコンポーネント間でデータ渡しを簡単にするための仕組み。

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 2
    }
});

上記のように、Vuex.Store()でインスタンス化し「Store＝格納する場」を作る。
格納する場には、「state＝状態」というプロパティがあり、このstateに定義されてるものがグローバル変数のようにデータ(状態)を持つものになる。

stateを変更するのを単純にやると

以下のようにthis.$store.state.countでVuexのStoreのstateにアクセスできるので、それに対して変更（今回は++, --）をしている。

vue.HeaderHome.vue

<template>
  <div>
    <button type="button" class="btn btn-secondary ms-2" @click="increment">
      +1
    </button>
    <button type="button" class="btn btn-secondary ms-2" @click="decrement">
      -1
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.state.count++;
    },
    decrement() {
      this.$store.state.count--;
    },
  },
};
</script>

※ただ、上記の実装ではパット見た時に、stateの値を参照している or 変更しているが分かりにくくになる。
　そこでmutations・commitという仕組みを使う。

mutation・commitでstateを変更する

以下のようにmutationsプロパティを定義し、そこに処理を書く。
その処理をコンポーネント側からはcommit()で呼び出す事でstateの変更を行う。

store.js

export default new Vuex.Store({
    state: {
        count: 2
    },
    mutations: {
        increment(state, number) {
            state.count += number;
        },
        decrement(state, number) {
            state.count -= number;
        }
    }
});

vue.HeaderHome.vue

<template>
  <div>
    <button type="button" class="btn btn-secondary ms-2" @click="increment">
      +1
    </button>
    <button type="button" class="btn btn-secondary ms-2" @click="decrement">
      -1
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit("increment", 2);
    },
    decrement() {
      this.$store.commit("decrement", 2);
    },
  },
};
</script>

mutationsを効率よく使う　～mapMutations～

上記のHeaderHome.vueのメソッドのような実装だと冗長だが、以下のように書く事もできこれだと少しスッキリする。
以下のように書く場合には、

@click="increment"　→　@click="increment(2)"
@click="decrement"　→　@click="decrement(2)"

として引数を渡す。

HeaderHome.vue

<script>
import { mapMutations } from "vuex";

export default {
  // "..."はES6のスプレッド演算子 
  methods: {
    ...mapMutations(["increment", "decrement"]),
  },
};
</script>

※ちなみに、mutationsに複数のデータを渡したい場合はオブジェクトで渡す。
　それはここを参照（例ではmutationsではなくactionsになっているがどちらでも同じで、actionsについてはここを参照。）

Vue.jsの勉強メモ一覧記事へのリンク

Vue.jsについて勉強した際に書いた勉強メモ記事のリンクを集約した記事。

【Vue.js】Vuexのstateを変えるような処理はmutation・commitで行う