Vue SPA Vuex編 -第2章- ~Vuexの完全理解！~

Vue

ストアの分割

ストアはモジュール化し、分割することで管理しやすくする。

モジュールの使い方
オブジェクトで定義したモジュールを、ストアのmodulesオプションに登録する。
モジュール定義

const moduleA = {

}
const moduleB = {
}

ストアに登録

const store = new Vuex.Store({
  modules:{
    moduleA,
    moduleB
}
})

モジュールのステートアクセス

store.state.moduleA
store.state.moduleB



ネームスペース
同一のタイプをコミットする際に同期させたくない場合に別のタイプ名を使用する。
その際にモジュールを定義する際、namespacedオプションをtrueに設定して ネームスペースを持つことが可能になる。

ネームスペースがついた場合/で区切って呼び出す。

commit('<ネームスペース>/<タイプ>')



機能とオプション

ストアの状態を監視
Vuexでアプリケーションレベルのウォッチャを定義できる。
関数の第1引数にstate、第2引数にgettersを使用して監視するデータを返す。

Strictモード
strict : trueでコードを厳格にみる。

Vuexでホットリロード
APIメソッドstore.hotUpdate()の設定が必要になる。
ただしVuex.Storeコンストラクタを使用するファイルは
ホットリロードが使用できないため 、別ファイルで作成する必要がある。