1.什么是vuex?

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

2.什么又是狀態管理呢?

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

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

這個狀態管理包括三個部分：

state，驅動應用的數據源;

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

actions，響應在 view 上的用戶輸入導致的狀態變化。

3.vuex的工作流程

vue官網給的流程圖

首先，Vue組件如果調用某個VueX的方法過程中需要向后端請求時或者說出現異步操作時，需要dispatch VueX中actions的方法，以保證數據的同步。可以說，action的存在就是為了讓mutations中的方法能在異步操作中起作用。

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

4. Mutations

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

4.1 Mutations使用方法

state是當前VueX對象中的state

payload是該方法在被調用時傳遞參數使用的

例如，我們編寫一個方法，當被執行時，能把下例中的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

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

this.$store.commit('edit')

5.Actions

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

Actions中的方法有兩個默認參數

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

payload 掛載參數

例如，我們在兩秒中后執行2.2.2節中的edit方法

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

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

6.規范目錄結構

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

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