これまでVuexが散々わからなくて感で書いてたのですが、ようやく大枠が理解できるようになりました。
自分のメモの意味でまとめます。
Vuexとは
vue.jsで使うデータの状態を管理をするためのライブラリでnuxt.jsにも標準で入っています。
設計的にはFluxというものの影響を受けています。
Fluxはデータフローを管理する考え方で、一方向にデータを向けるといった考え方です。
データが単一の方向に制限できるので、管理の複雑さを軽減するためバグ、不具合が起きたときも検証がしやすいです。
Vuexはaction => Mutation => State => Vue Component (View) という、単一方向のデータフローになります。
Storeについて
Vuexで自分が主に使うのはstoreです（というか他に何があるのかもよくわかっていません）
Storeはデータを管理するコンテナ（箱）的な役割で、複数のコンポーネントを跨いで参照するときに複雑なデータの受け渡しをせずにStoreで一元管理するといったメリットがあります。
Storeの中では4つの機能（データの方向）が有ります
- Action（アクション）
- Mutation（ミューテーション）
- State（ステート）
- Getter（ゲッター）
Action
関数を作成して、Mutationに登録された関数をcommitで持ってくる。
Mutationと違い非同期の処理を持ってこれるので、apiなどのデータを持ってくる系はここで実装する
使用するときは...mapActionsを使う
Mutation
stateを更新できる唯一の場所。
Mutationの関数は直接呼び出す事ができない。
※ store.commit()とかで呼び出します
State
データの状態を管理する箱。
vueの中でのdata的な役割をしている。
Getter
Getterはstateのデータを参照して加工する場所。
複数の場所でfilter処理されたデータを使いたい場合に、コンポーネント側にfilter処理があると、それぞれのコンポーネントでfilterの実装を書く必要でるのでそれを共通化する目的。
使用するときは...mapGettersを使う