Vuex
https://vuex.vuejs.org/vuex.png
Vuex とは何か? | Vuex
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: {...
namespacing Modules | Vuex
Vuexの構造を超簡単にnamespace(名前空間)分割する - Qiita
Modules
Modules | Vuex
TODO
インスタンスメソッド
subscribe
API リファレンス | Vuex subscribe
utilとかで読み込んで、localStorageへstore global-dataの保存場所の状態保存
code:util.js
// vuexの変更を検知して、localStorageへ保存
export function saveStatePlugin(store) {
store.subscribe((mutation, state) =>
localStorage.setItem("boards", JSON.stringify(state.boards))
);
}
mapState
spread記法
getter ゲッター
computedで毎回作るよりも、getterとして用意したほうが、Performance パフォーマンス良い
静的も動的も可能
mapGettersもある
mutations
同期的
Fluxパターンでは、すべて大文字にするのが一般的
actions
非同期
action({ state, commit }, a,...) {
実装例
GitHub.iconvue-login/client at master · KiichiSugihara/vue-login
参考
💯Intro to Vuex - Mastering Vuex | Vue Mastery
アニメーションですごくわかりやすい!
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita