Vue SPA Vuex編 -第1章- ~VuexはDB！~ - 19歳から学んだ記録

Vuex

状態管理の拡張ライブラリで、データとその状態に関する全てを一元管理する。

特徴
Vuexによって管理されているデータはリアクティブになっているため、
構造状態に関わらず常に同期されている。
またデータの管理や、状態を管理できるモジュール機能などを持つ。

ポリフィル
ES2015のPromiseに対応していないブラウザをサポートする為に
babel-polyfillなどのポリフィルをインストールする必要がある。

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Store

Vuexで状態を管理する為ストアを作成する。
アプリケーション内の仮想的なデータベースと考える。
Vuex.Storeコンストラクタでインスタンスを作成する。

Vueアプリケーションにストアを登録する
ストアのインスタンスをVueアプリケーションのルートに登録すれば、
コンポーネントのインスタンスプロパティ$storeでどこからでも使用できる。
そして単一ファイルコンポーネントごとにstoreを読み込む必要がなくなる。

コアコンセプト

コンポーネントとVuexの機能の繋がり

コンポーネント
↓
アクション(store内) ←→ 外部API
↓
ミューテーション(store内) 
↓
ステート(store内) 
↓
コンポーネント
↓

と繰り返している流れ。

ステート(state)
ステートはストアで管理している状態そのもの。
ミューテーション以外からの変更はできない。
コンポーネントでいうdata。

ゲッター(getter)
ゲッターは、ステートを取得する為の算出データ。
算出プロパティとの違いは引数が渡せるが、セッターはない。
プロパティやメソッドを受け取れる。
コンポーネントでいうcomputedとmethodsの中間。
ただ引数付きのゲッターはキャッシュが行われないので、
何度かアクセスするデータはコンポーネントの算出プロパティに登録してキャッシュするのが良い。

ミューテーション(mutations)
ステートを変更できる唯一のメソッド。
コンポーネントでいうmethods。
ミューテーションとアクションのメソッドはタイプと呼ばれる。
引数で以下の情報が受け取れる。
1.state ステート
2.payload コミットからの引数

コミット(commit)
ミューテーションを呼び出すためのインスタンスメソッドがコミット。
コンポーネントでいう$emit。
引数の使用可。

アクション(action)
非同期処理を含めることができるメソッドで、
データの処理や非同期処理を行い、結果をミューテーションへコミットする。
ステートを変更する以外の処理はアクション内で済ませるのが良い。

ディスパッチ(dispatch)
登録されているアクションを呼び出すインスタンスメソッドで、
別のアクション内からも使用できる。
ミューテーションとpayloadの扱いは同じ。

Vuexの小さなまとめ
1.アプリケーションレベルの状態まではストアで管理する。
2.ミューテーション内でしか状態変更ができない。
3.非同期処理はコミット前！

次回！

これ以上管理しやすく！？Vuexのさらなる知識！