Vuexの役割
アプリケーションの状態管理をしてくれます。アプリケーションを開発していると一つの状態を複数の場所で参照したいという状況が必ず生まれます。もし何も考えずに実装してしまうと同じ種類の状態や状態を更新するロジックをアプリの複数箇所に実装してしまったりします。データフローを事前にしっかり考慮して設計する必要があります。Vuexの思想となっている「状態管理」や「Flux」については下記を参照ください。他にもElmアーキテクチャやReduxを参考に作られています。
Vuexのメリット
- Vue DevToolsを使えば状態変化をログとして見れたり任意の地点への状態へ巻き戻せる。
Vuexの構成要素：ストア
アプリケーションの状態を保持する役割です。アプリ内でただ一つのストアが存在するようにします。
構文
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
const store = new Vuex.Store({ //ステート state: { data:1 }, //ゲッター getters: { ゲッター名1: (state) => stateを使った計算 }, //ミュテーション mutations: { addData1 (state,payload){ state.data1 += payload } }, //アクションズ actions: { 関数名(コンテキスト,payload){ } } }) //ミュテーションの実行 store.commit('addData1',1) //第二引数(この場合の1)をペイロードと呼ぶ。 //アクションの実行 store.dispatch('関数名') |
ストアの構成要素
ストアには下記の4つの構成要素があります。大規模アプリであれば下記の要素はモジュール単位に分割して記述したりします。
- ステート(State)
- ゲッター(Getter)
- ミュテーション(Mutation)
- アクション(Action)
ステート
アプリケーション全体の状態を保持するオブジェクト（例えば、ログイン中のユーザーの情報）、ステートに対して何かしらの変更を行った場合は自動的にコンポーネントに即座に反映されます。（Vue.jsのリアクティブシステムを利用している）
ゲッター
ステートから計算された別の値データを返します。（例えば、商品の絞り込みを実施する等）、ゲッターを使用することでコンポーネント間で計算ロジックを共有することができます。コンポーネントのcomputedオプションに動作は似ています。
ミュテーション
ステートを更新する役割です。必ず同期処理のみ記述します。逆に言えばミュテーション以外以外でステートの更新を行うことは禁止されています。「Vue DevTools」を使えばステートの変化とミュテーションがどのような時系列で呼ばれるかを確認できます。また、どのような値に更新するかstore.commitの第二引数でミュテーションに指示しますが、その値をペイロードと呼びます。
アクション
Ajaxリクエストや、LocalStorageへの読み書きのような外部API。ミュテーションと異なり非同期な処理を記述します。最終的にはミュテーションを呼び出して値を更新します。
ストアとコンポーネントとの関係図
ストアのステートについて
ステートに保持するデータとして適しているもの
- APIによりデータ取得中であることを表すフラグ
- ログイン中のユーザー情報
- ECサイトで商品カートの中に保存されているデータ
コンポーネント側で保持するデータとして適しているもの
- フォームの入力状態等のデータ
ミュテーションの注意点
必ず同期処理にする必要があります。非同期にしてしまうとミュテーションの呼び出しとステートの更新を結びつけが困難になるためです。
アクションの詳細仕様
アクションには第一引数にコンテキストを渡します。コンテキストには下記の情報が含まれています。第二引数にはpayloadとしてどのミュテーションを更新するかを渡したりします。
- 現在のステート(state)
- 定義されているゲッター(getters)
- 他のアクションを実行するメソッド(dispatch)
- ミュテーションを実行するメソッド(commit)
state,getters
特定の状態によってアクションを実行するか制御するために使われます。
Nuxt.jsでの利用について
Nuxt.jsでは、Vuexを下記のモードで使い分けます。
- クラシックモード
- モジュールモード
クラシックモード
従来のVuex同様のモードになります。index.jsをstoreディレクトリに使います。
Vuexを読み込み、作成したstoreをexportします。
store/ファイル名.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import Vuex from 'vuex' const state = () => new Vuex.Store({ state : { count: 0 }, mutations: { increment(state){ state.count++ } } }) export default store |
モジュールモード
Nuxt.jsで追加されたモードで、ファイルごとにストアを定義することができます。
定義の仕方が異なるだけで利用は通常のVuexと同様に行うことができます。
ファイルごとに、下記をexportします。
- state
- mutations
- actions
実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export const state = () => ({ body: "" }) export const mutations = { update (state, text) { state.body = text }, } export const actions = { update (state, text) { context.commit({ type: 'update', text: text }) } } |
この記事へのコメントはありません。