初心者によるvuexまとめ

追記

もう少しまともに書いた記事はこちら

初心者なりにニュアンスだけ理解したvuexのまとめです。

vuexとは

vuexはfacebookが提唱しているFluxデータフローというデータの流れの理想？？的なののvue.jsバージョン。

データの流れを単方向にする事で、大規模なWebアプリケーションを開発時でも、データの流れを見失いずらいってメリットがあるらしいです。

公式ドキュメントもあります。

使い方

例として以下のようなjsファイルがあったとします。

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

    const example = {
        state: {
            member: [
                {name: "Tom", old: "20"},
                {name: "John", old: "30"},
            ]
        },
        mutations: {
            updateMember (state, member) {
                state.member = member
            }
        },
        actions: {
            updateMember (context, member) {
                context.commit('updateMember', member)
            }
        },
        getters: {
            getMember (state) {
                return state.member
            }
        },
    }
 }

• state :　データを格納してある場所。
• mutations :　actionsから値を受け取って、stateを書き換える場所 (ここ以外でstateを書き換えてはいけません。)
• actions :　コンポーネントから値を受け取って、mutationsに受け渡す場所。
• getters :　stateのデータを取得するときに呼び出す。

実際の流れとしては

• storeのデータを使いたい時は $store.getters['getMember'] でstateのmemberを取得
• コンポーネント等で書き換えたmemberをstateに反映させたい場合は、
  $store.dispatch('updateMember', member)でActionsに値を渡す。
• コンポーネントからactionsに渡ってきたmemberを、mutationsのupdateMemberに渡して、stateのmemberを書き換える。
• memberが書き換わり、データが更新される。

こんな感じの流れで、データが一方向に流れていくって感じです。

とてもざっくり書きましたが、図を見ながら流れを追ってもらうとよりわかりやすいと思います。