一、從vuex工作流程的角度

????????當(dāng)vue項(xiàng)目中需要進(jìn)行跨組件共享數(shù)據(jù)或緩存數(shù)據(jù)時(shí)，我們會(huì)用到vuex。 安裝vuex，在src/store中編寫(xiě)狀態(tài)管理的邏輯。 src/store/index.js 注冊(cè)Vuex、創(chuàng)建store（要分modules）、拋出store。 在main.js中掛載store。 我們把需要共享的數(shù)據(jù)定義在子store中（一定開(kāi)啟命名空間），用state定義可共享數(shù)據(jù)，用mutations定義修改state的方法，用actions封裝調(diào)接口的方法。 在src/store/index.js使用modules字段合并子store。 在vue組件中使用state，要么使用this.store.state來(lái)訪(fǎng)問(wèn)（不建議），要么使用mapState()來(lái)訪(fǎng)問(wèn)（建議）。映射進(jìn)入組件后，就可以使用this來(lái)訪(fǎng)問(wèn)它們了。（getters和state的用法是一樣的）在vue組件中使用mutations，要么用this.store.commit('mutations方法', '數(shù)據(jù)')提交并觸發(fā)，要么使用mapMutations映射進(jìn)來(lái)用this來(lái)訪(fǎng)問(wèn)它們。 在vue組件中使用actions，要么用this.$store.dispatch('actions方法', '數(shù)據(jù)')提交并觸發(fā)，要么使用mapActions映射進(jìn)來(lái)用this來(lái)訪(fǎng)問(wèn)它們。

簡(jiǎn)而言之

把需要共享或緩存的后端數(shù)據(jù)定義在state中，（數(shù)據(jù)在后端，怎么拿到數(shù)據(jù)？）封裝api在actions定義方法（這個(gè)方法給誰(shuí)用？）在vue組件觸發(fā)actions方法，actions方法調(diào)接口，拿到后端數(shù)據(jù)，在actions方法內(nèi)部使用mutations方法來(lái)修改state，因?yàn)閟tate是響應(yīng)式的，所以當(dāng)state發(fā)生變化vue組件視圖會(huì)自動(dòng)更新。這就是vuex基本工作流程，也是所謂Flux單向數(shù)據(jù)流的基本思想

二、從數(shù)據(jù)流的角度

在vue組件中觸發(fā)actions方法 actions方法調(diào)接口，數(shù)據(jù)首先要經(jīng)過(guò)axios攔截器 只有當(dāng)axios攔截器沒(méi)有問(wèn)題時(shí)，actions方法才能收到后端數(shù)據(jù)。 actions方法收到后端數(shù)據(jù)后，觸發(fā)mutations方法 mutations方法收到數(shù)據(jù)后，放到state上 state數(shù)據(jù)給頁(yè)面使用，一般在組件的計(jì)算屬性中拿到數(shù)據(jù) 組件拿到state數(shù)據(jù)，給指令使用來(lái)渲染頁(yè)面