Vuexをわかりやすく知りたい

Vuexとは

Vue.jsの状態管理のライブラリ。データフローが単方向になるように設計されている。

単方向データフローのメリット
・データを取得しつつ更新するような複雑な処理ができないので、実装やデバッグが単純になる。
・理解が容易なコードを書きやすい。

ストア

アプリケーションの状態を保持する。vuexの根幹となる部分。アプリケーション内に常に一つのストアのみが存在する。

//ストアの作成と代入
const store = new Vuex.Store({ /* 処理 */ })

ストアの構成要素４つ

・state
・getter(値を返す）
・mutation(stateを更新する)
・action(非同期処理や外部APIとのやりとりを行う

規模の大きいアプリケーションを作る際には上記４つの構成要素をmoduleという単位で分割して見通しをよくする。

vuexとvue.jsのデータフロー

ステート

アプリケーション全体の状態を保持するオブジェクト

ステート数が多くなるときはモジュールを使用して分割管理する。
あるコンポーネントでしか使用しないデータはコンポーネントのdataオプションで管理するべき。一方アプリケーション全体で使用されるデータはストア内で管理すべき。

//stateオプションでステートの初期値を指定する
state: {
    count:10
 }

store.stateでステートを参照

console.log(store.state.count) //→10

コンポーネントのdataオプションに渡された値と同じように変更が追跡される。

ゲッター

ステートから別の値を算出するために用いられる。

例えばユーザーの操作によって商品のリストを絞り込みたい時、ゲッターで絞り込んだ商品のリストを算出する。

利点：コンポーネント上で表示のためにステートを計算することが避けら　れ、異なるコンポーネント間でロジックを再利用できるようになる。
算出のロジックをストア内におくことができるので探しやすくテストがしやすい。

//ゲッターを定義する
getters:{
    //ステートから別の値を計算する
    double:(state) => state.count * 2,
    
    //他のゲッターの値を使うことも可能
    includeTax:(state,getters) => getters.double * 1.1;
 }

store.gettersでゲッターを参照する

console.log(store.getters.includeTax) 

依存するステートが存在しない時にサーバーから値を取得するような処理はゲッターではなく、ミューテーション、アクションを使って取得とステートへの反映を行う。

ミューテーション

ステートを更新するために使う

vuexではミューテーション以外がステートの更新を行うことを禁止している。

//ミューテーションを定義
mutations:{
    //incrementミューテーションを定義
    increment(state) {
        state.count = state.count + 1
     }
 }

ミューテーションは直接呼び出せず、store.commitにミューテーション名を与えて呼び出す。

console.log(store.state.count) //→10
store.commit('increment') //incrementミューテーションを呼び出す
console.log(store.state.count) //→11

store.commitの第二引数に値を与えると渡される。(この値をペイロードと呼ぶ)

mutations:{
    increment(state,payload){
        state.count = state.count + payload.amount
     }
}
console.log(store.state.count) //→10
store.commit('increment',{amount:5}) //
console.log(store.state.count) //　→15

ミューテーション内で行う処理は全て同期的にする必要がある。非同期処理はアクションに任せよう。

アクション

非同期処理や外部APIとの通信を行い、最終的にミューテーションを呼び出すために使う。

//アクションを定義
actions:{
    incrementAction(ctx){
        //incrementミューテーションを実行する
        ctx.commit('increment')
     }
 }

ミューテーションと同様に直接呼び出すことはできないのでstore.dispatchにアクション名を与えて呼び出す。

console.log(store.state.count) // -> 10
store.dispatch('incrementAction') //incrementActionを呼び出す
console.log(store.state.count) // ->11

第一引数にコンテキストと呼ばれる特別なオブジェクトが渡される。

コンテキストに含まれるもの
・state:現在のステート
・getters:定義されているゲッター
・dispatch:他のアクションを実行するメソッド
・commit:ミューテーションを実行するメソッド

参考

こちらVue.jsの参考書ですがvuexについて書かれた章があるのでそこで勉強しました！

Vue.js入門 基礎から実践アプリケーション開発まで