一、從vuex工作流程的角度

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

簡而言之

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

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

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