JavaScript

Vuexのミューテーションの使い方。状態を更新しよう|Vuex

質問者
質問者
Vuexのミューテーションって何ですか?使い方を教えてください。

ミューテーションはステートを更新するために用いられます。Vuexではミューテーション以外がステートの更新を行うことを禁止(やろうと思えば更新できますが、アンチパターン)しています。状態の更新を追いかけやすくするために、このような規約が設けられています。では、ミューテーションの定義方法と更新方法についてみていきましょう。

ミューテーションを定義してみよう

ミューテーションを定義するには、下記のようにストアの生成時にmutationsオプションを指定して、その中にハンドラ関数を定義します。今回はisLoggedInというハンドラ関数を定義しました。

ハンドラ関数は状態(state)を第1引数として取得し、状態の変更を行います。また、仮引数を追加することもできます。下記で仮引数を追加してみます。

状態(state)を更新してみよう

状態(state)の更新をしてみましょう。まず、覚えておく必要があるのは、ミューテーションは直接呼び出せないということです。つまり、store.mutations.inLoggedIn()のように使うことはできません。

では、どのように状態(state)を更新するのかというと、store.commitにミューテーション名や引数(ペイロードと呼びます)を与えて呼び出すことで実現します

例えば、下記のようにハンドラ関数を呼び出します。

ペイロードを使用する場合は次のように書きます。

ペイロードはオブジェクト型を使うことが推奨されています。そうすることで複数のフィールドを含められるようになり、またミューテーションがより記述的に記録されるようになるからです。

console.logで確認すると次のように動作します。

ペイロードを使った場合の動作も確認してみましょう。

筆者
筆者
以上、Vuexストアのミューテーションについてでした。