摘要：中的非常類似于事件每個(gè)都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受作為第一個(gè)參數(shù)提交載荷你可以向傳入額外的參數(shù)，即的載荷類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。說白了，vuex就是用來管理數(shù)據(jù)的。

直接下載或者CDN引入

https://unpkg.com/vuex

Vuex的核心就是store（倉庫），其包含應(yīng)用中的大部分狀態(tài)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

Vuex的狀態(tài)存儲(chǔ)時(shí)響應(yīng)式的

store中狀態(tài)不能直接改變

現(xiàn)在我們來創(chuàng)建一個(gè)store：

new Vuex.Store({
    state:{
        //......
    },
    mutations:{

    }
})

在這個(gè)store里，包含了一個(gè) state 對(duì)象和 mutations

state用來存儲(chǔ)初始化的數(shù)據(jù)，讀取數(shù)據(jù)使用 store.state.數(shù)據(jù) 。

修改數(shù)據(jù)使用 mutations ，調(diào)用 mutations 里的數(shù)據(jù)需要使用 commit()

現(xiàn)在來嘗試使用以下vuex，做一個(gè)簡單的計(jì)數(shù)程序：

HTML

javascript

    var store = new Vuex.Store({
      state:{
        count:0
      },
      mutations:{
        plus(state){
          state.count++
        },
        less(state){
          state.count--
        }
      }
    });

    var app=new Vue({
      el:"#app",
      template:"#tpl",
      components:{
        tip:{
          template:"
{{$store.state.count}}
"
        },
        btn:{
          template:`
            

              
              
            
          `
        }
      },
      store
    }}

State

Getters

Mutations

Actions

Modlues

由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，從 store 實(shí)例中讀取狀態(tài)最簡單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)：

// 創(chuàng)建一個(gè) Counter 組件
const Counter = {
  template: `
{{ count }}
`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每當(dāng) store.state.count 變化的時(shí)候, 都會(huì)重新求取計(jì)算屬性，并且觸發(fā)更新相關(guān)聯(lián)的 DOM。

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：

// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState
import { mapState } from "vuex"

export default {
  // ...
  computed: mapState({
    // 箭頭函數(shù)可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數(shù) "count" 等同于 `state => state.count`
    countAlias: "count",

    // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多個(gè)組件需要用到此屬性，我們要么復(fù)制這個(gè)函數(shù)，或者抽取到一個(gè)共享函數(shù)然后在多處導(dǎo)入它 —— 無論哪種方式都不是很理想。

Vuex 允許我們?cè)?store 中定義『getters』（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getters的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

Getters 接受 state 作為其第一個(gè)參數(shù)：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: "...", done: true },
      { id: 2, text: "...", done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})


store.getters.doneTodes

Getters 也可以接受其他 getters 作為第二個(gè)參數(shù)：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount

我們可以很容易地在任何組件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

mapGetters 輔助函數(shù)僅僅是將 store 中的 getters 映射到局部計(jì)算屬性：

computed:{
  ...mapGetters([
    // 使用對(duì)象展開運(yùn)算符將 getters 混入 computed 對(duì)象中
    "doneTodosCount",
    "anotherGetters"
  ])
}

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    plus(state){
      state.count++
    },
    less(state){
      state.count--
    }
  }
});

你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷（payload）：

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    plus(state,n){
      state.count+=n
    },
    less(state,n){
      state.count-=n
    }
  }
});

this.$store.commit("plus",5)
this.$store.commit("less",5)

Action 類似于 mutation，不同在于：

Action 提交的是 mutation ，而不是直接變更狀態(tài)

Action 可以包含任意異步操作

actions:{
  plus(commit){
    commit({type:"plus",n:5})
  }
}