1.什么是vuex?

官方的理解是：Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導入導出等高級調(diào)試功能。

2.什么又是狀態(tài)管理呢?

讓我們從一個簡單的 Vue 計數(shù)應用開始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

這個狀態(tài)管理包括三個部分：

state，驅(qū)動應用的數(shù)據(jù)源;

view，以聲明方式將 state 映射到視圖;

actions，響應在 view 上的用戶輸入導致的狀態(tài)變化。

3.vuex的工作流程

vue官網(wǎng)給的流程圖

首先，Vue組件如果調(diào)用某個VueX的方法過程中需要向后端請求時或者說出現(xiàn)異步操作時，需要dispatch VueX中actions的方法，以保證數(shù)據(jù)的同步?？梢哉f，action的存在就是為了讓mutations中的方法能在異步操作中起作用。

如果沒有異步操作，那么我們就可以直接在組件內(nèi)提交狀態(tài)中的Mutations中自己編寫的方法來達成對state成員的操作。注意，1.3.3節(jié)中有提到，不建議在組件中直接對state中的成員進行操作，這是因為直接修改(例如：this.$store.state.name = 'hello')的話不能被VueDevtools所監(jiān)控到。

4. Mutations

mutations是操作state數(shù)據(jù)的方法的集合，比如對該數(shù)據(jù)的修改、增加、刪除等等。

4.1 Mutations使用方法

state是當前VueX對象中的state

payload是該方法在被調(diào)用時傳遞參數(shù)使用的

例如，我們編寫一個方法，當被執(zhí)行時，能把下例中的name值修改為"jack",我們只需要這樣做

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        name:'helloVueX'
    },
    mutations:{
        //es6語法，等同edit:funcion(){...}
        edit(state){
            state.name = 'jack'
        }
    }
})

export default store

而在組件中，我們需要這樣去調(diào)用這個mutation——例如在App.vue的某個method中:

this.$store.commit('edit')

5.Actions

由于直接在mutation方法中進行異步操作，將會引起數(shù)據(jù)失效。所以提供了Actions來專門進行異步操作，最終提交mutation方法。

Actions中的方法有兩個默認參數(shù)

context 上下文(相當于箭頭函數(shù)中的this)對象

payload 掛載參數(shù)

例如，我們在兩秒中后執(zhí)行2.2.2節(jié)中的edit方法

由于setTimeout是異步操作，所以需要使用actions

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

6.規(guī)范目錄結(jié)構(gòu)

store:.
│  actions.js
│  getters.js
│  index.js
│  mutations.js
│  mutations_type.js   ##該項為存放mutaions方法常量的文件，按需要可加入
│
└─modules
        Astore.js

對應的內(nèi)容存放在對應的文件中，和以前一樣，在index.js中存放并導出store。state中的數(shù)據(jù)盡量放在index.js中。而modules中的Astore局部模塊狀態(tài)如果多的話也可以進行細分。