Vuex mutationでstateの値を変更する
Vuex stateを作成して各コンポーネントで参照するでstate
を作成して各コンポーネントで参照できるようになりました。
state
はmutation
の処理でしか変更できません。コンポーネントからmutation
を実行し、state
の値を更新する方法を紹介します。
mutation-typesの作成
mutation
を作成するにあたって、最初にmutation-types
を作成します。
以下のようなファイルを作成します。
mutation-types.js
export const MESSAGE_UPDATE = 'MESSAGE_UPDATE';
変数名と同じ文字列を定義したconst
の変数を定義します。
mutation
をコールするとき、mutation
の指定は文字列で行います。文字列をconst
で定義しておけばmutation
の宣言やコールを全て定義したconst
変数で行えるため、コーディングミスが減り、保守性も上がります。
mutationの作成
mutations.js
ファイルにmutation
の処理を作成します。store.message
の内容を変更するmutation
です。
第一引数はstate
となるため、引数が必要な場合は第2引数に定義します。
mutations.js
import * as types from 'js/store/mutation-types'; //mutation-typesをImportします
export const state = {
message: 'hello vuex'
};
export const mutations = {
[types.MESSAGE_UPDATE] (state) {
state.message = 'hello mutation';
},
// 引数が必要な場合は第2引数に定義します
[types.FOO] (state, payload) {
state.message = payload.message;
},
// このような方法もよく見かけます(機能はFOOと同じです)
[types.BAR] (state, { message }) {
state.message = message;
}
};
[変数名]
でファンクション名を変数で定義できます。
コンポーネントからmutationをコール
template
ボタンを配置し、クリックするとmutation
をコールするファンクションを実行するようにします。
App.vue
<template>
<div>
<div class="message">
{{ message }}
</div>
<input type="button" value="更新" @click="update()">
</div>
</template>
script
更新ボタンクリックで呼ばれるファンクションupdate
を定義します。その中でmutation
をコールします。
mapState
同じようにmapMutations
でmutation
を参照できるようになります。スプレッド演算子やmutation-types
によって、コードがかなりシンプルになります。
App.vue
<script>
import { mapState, mapMutations } from 'vuex';
import { MESSAGE_UPDATE } from 'js/store/mutation-types';
export default {
computed: {
...mapState({
message: 'message'
})
},
methods: {
...mapMutations({
MESSAGE_UPDATE
}),
update () {
this.MESSAGE_UPDATE(); // mutationをコールします
}
}
};
</script>
実行
更新ボタンをクリックするとメッセージがhello mutation
に変更されます。
ここで注目したいのが、mutation
ではstate
を変更しただけで、再描画の処理を行っていないことです。
Vuex
に限らず、Vue.js
ではcomputed
に定義した値は、変更されると自動的に画面の更新もおこなってくれるので、state
の内容と画面の内容で同期が取れていることになります。
Vuex
を導入することにより、Vue.js
の機能の恩恵をさらに受けられます。