Edited at

初心者によるvuexまとめ

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

image.png


vuexとは

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

image.png

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

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


使い方

image.png

例として以下のような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が書き換わり、データが更新される。

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

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