Vuex
https://vuex.vuejs.org/vuex.png
https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2F1578371900954_6.gif?alt=media&token=a92f02df-8800-4f4a-ac63-6690f9453e66
要するに
action: UIから呼ばれる/APIを呼ぶ/mutationを呼ぶ
mutation: stateを更新する
getter: stateをごにょごにょしてUIに返す
NameSpace
type.jsファイル等の名前空間手動管理からの開放
code:nameSpace.js
export const auth = {
namespaced: true,
state: initialState,
actions: {...
Modules
TODO
インスタンスメソッド
subscribe
code:util.js
// vuexの変更を検知して、localStorageへ保存
export function saveStatePlugin(store) {
store.subscribe((mutation, state) =>
localStorage.setItem("boards", JSON.stringify(state.boards))
);
}
spread記法
静的も動的も可能
mapGettersもある
mutations
同期的
Fluxパターンでは、すべて大文字にするのが一般的 actions
非同期
action({ state, commit }, a,...) {
実装例
参考
アニメーションですごくわかりやすい！