（1）簡單的頁面中使用單向數(shù)據(jù)流
（2）vuex的流程圖
（3）store
由于 store 中的狀態(tài)是響應(yīng)式的溜宽，在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計(jì)算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation
為什么需要使用vuex?
- 多個(gè)視圖依賴于同一狀態(tài)胁澳。
- 來自不同視圖的行為需要變更同一狀態(tài)
（4）還是從一個(gè)計(jì)數(shù)器開始
在vuecli里面使用vuex還是講究一點(diǎn)規(guī)矩的
- 進(jìn)行包的安裝 cnpm i vuex --save
- 在src下新建一個(gè)store文件夾鹿驼，store下新建一個(gè)index.js
3.每當(dāng)使用插件欲低，一定要記得引入，并使用Vue.use()
方法中傳入state參數(shù)就不再需要this
-
創(chuàng)建好store倉庫以后就需要組件來調(diào)用狀態(tài)畜晰，更新狀態(tài)砾莱，之前還應(yīng)該有一個(gè)步驟將這個(gè)store倉庫注冊到全局，通過this.$store來進(jìn)行全局調(diào)用
image.png
-
接下來就可以再全局進(jìn)行使用凄鼻，組件直接去調(diào)用腊瑟，使用store里面的數(shù)據(jù)最好通過計(jì)算屬性來渲染，更新還是通過methods,但是不是直接去操作state块蚌，而是通過mutations
image.png
（5）getters
對state里面的數(shù)據(jù)進(jìn)行過濾封裝處理闰非，然后在計(jì)算屬性里面還是通過this.$store.getters.methodName進(jìn)行調(diào)用（可以認(rèn)為是 store 的計(jì)算屬性），就像計(jì)算屬性一樣峭范，getter 的返回值會根據(jù)它的依賴被緩存起來财松，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算
Getter 也可以接受其他 getter 作為第二個(gè)參數(shù)
在上一個(gè)Demo中進(jìn)行增加
晦澀難懂
getters必須寫在組件的計(jì)算屬性里面，頁面展示可以直接調(diào)纱控，但是在方法里面調(diào)用需要加上this
（6）mutations
唯一的更新state數(shù)據(jù)的方法游岳，在組件中commit的時(shí)候類似JQ的trigger方法
如果要使用 ...mapMutations([ ])輔助方法并在頁面創(chuàng)建時(shí)調(diào)用以獲取數(shù)據(jù)必須寫在methods里面，然后去created里面調(diào)用mapmutation里面的方法
（7）Action
雖然還沒深刻領(lǐng)悟到為什么要在mutation上再加一層其徙，但是怎么用還是要明白的胚迫，現(xiàn)在唯一知道的就是可以組件向action傳參(mutation也可以傳參，主要差別還是一個(gè)是同步唾那，一個(gè)是異步)
自然還是先創(chuàng)建action,通過提交mutation里面的方法來傳遞參數(shù)
在組件里面又是如何來處理呢访锻？既然對象都變了褪尝，方法肯定也變了，使用
this.$store.dispatch("actionName", param)來分發(fā)
- ES6的寫法
（8）
使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex期犬。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試河哑，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件龟虎，最好還是作為組件的局部狀態(tài)
（9）坑爹的getters
要想獲取state里面的數(shù)據(jù)璃谨，必須通過計(jì)算屬性來返回，另外不能直接通過
this.$store.state.data來獲取數(shù)據(jù)
（10）
（11）開啟嚴(yán)格模式
（12）總結(jié)一下
我發(fā)現(xiàn)人啊就是容易忘記鲤妥，我有幾次都能記得getters, mutations, actions,就是不記得用什么來觸發(fā)了佳吞，或者記不起那兩個(gè)單詞了
- commit --> mutations（同步）
- dispatch --> actions(異步)
（13）關(guān)于vuex的使用
使用vuex開發(fā)管理系統(tǒng)，開始是頭非常暈的棉安，狀態(tài)總是易變的底扳，還相互影響，后面想明白了贡耽，不是什么地方都需要狀態(tài)管理的衷模，除了登錄的用戶信息以及Token的處理，其他地方還是正常的去用axios拉取數(shù)據(jù)渲染蒲赂，直接與后臺交互阱冶，沒必要使用vuex，就是用來保存登錄狀態(tài)滥嘴，結(jié)合本地存儲
（14）Bus總線
通過實(shí)例化一個(gè)vue實(shí)例賦值給Bus
（15）vuex結(jié)合表單
通過觸發(fā)輸入函數(shù)來commit mutation
（16）actions(mutations)與v-model的結(jié)合
對于commit或者dispatch進(jìn)來的對象不能進(jìn)行直接添加到state里木蹬，需要重新構(gòu)造一個(gè)對象
不然會導(dǎo)致v-model綁定到state中的對應(yīng)數(shù)據(jù)，并會關(guān)聯(lián)同名屬性都變成輸入值
（17）啟用vuex logger插件
（18)
