Vuexでアプリケーションの状態を管理する

Vuexとは

データとその状態を一括管理する「状態管理」のための拡張ライブラリ。

アプリケーション規模が大きくなり、コンポーネントの数も増えていくと、
同じ「data」にアクセスしたいという場合、親->子->孫->曽孫のように「props」「emit」を受け渡していかなければなりません。Vuexを使用するとどのコンポーネントからでも同じ「data」にアクセスできるようにアプリケーション全体としてのリアクティブプロパティを定義し管理することができます。

┏━┳━┳━┳━┓
┃　　　　　　　┃
┃ コンポーネント ┃
┃　　　　　　　┃
┗━┻━┻━┻━┛

自動的に反映　↑

┏━┳━┳━┳━┓
┃　　　　　　　┃
┃　Vuex　　　　┃
┃　　　　　　　┃
┗━┻━┻━┻━┛

↓　自動的に反映

┏━┳━┳━┳━┓
┃　　　　　　　┃
┃ コンポーネント ┃
┃　　　　　　　┃
┗━┻━┻━┻━┛

storeの作成

storeはアプリケーション内に作った「仮想のデータベースのようなもの」と思ってください。

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store'; //追加

Vue.use(Vuex);

new Vue({
  el: '#app',
  store, // ストアをVueアプリケーションに登録する
  components: {
    MyApp
  },
});

単一コンポーネント毎に「store.js」を読み込む必要があるため、ストアのインスタンスを
Vueアプリケーションのルートに登録することで、コンポーネントのインスタンスプロパティを $storeとしてどこからでも使用できるようになる。

Vue.use(プラグイン名) プラグインを使うための記述
new インスタンス生成前に読み込まれる。

store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state){
      state.count ++
    }
  }
})
export default store

Vuexの基本的なイメージ

コンポーネントからState（状態)を更新したい場合、アクション と ミューテーション を使います。

State （ステート)

ステートは、ストアで管理している状態そのもの。
ステートはミューテーション以外の場所から変更することはできません。

getter （ゲッター）

ステートを取得するための算出データであり、computed muthods の中間の様な存在。
JavaScriptファイル内で使えるcomputedというイメージ。

Mutations （ミューテーション)

ステートを変更できる唯一のメソッドであり、コンポーネントでいうところのmethods
引数として、stateとpayload（コミットからの引数）

Commit (コミット）

ここでのコミットは、登録されているミューテーションを呼び出すインスタンスメソッド。
コンポーネントでいうところでいうところの$emitと似ていて、任意で引数を取れる。

Actions （アクション)

非同期処理を含めることのできるメソッド。
データの加工や非同期処理を行い、その結果をミューテーションへコミットする。

dispatch (ディスパッチ)

登録されているアクションを呼び出すインスタンスメソッド。
別のアクション内からも使用できる。任意で引数を持たせることができる。