什么是Vuex？

vuex是一個專門為vue.js設計的集中式狀態(tài)管理架構。狀態(tài)？我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡單的說就是data中需要共用的屬性。

為什么使用Vuex？

如果您不打算開發(fā)大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

vuex組成
state:
存放的數(shù)據狀態(tài)

getters：

對state中的狀態(tài)進行過濾處理

一般處理方法是：
computed: {

count(){
    return this.$store.state.countNum.filter(todo => todo.done).length;
}

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

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

Getters 接受 state 作為其第一個參數(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)
}

}
})
Getters 會暴露為 store.getters 對象：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Mutations:
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
mutation中寫有修改數(shù)據的邏輯。

Actions:

Action 提交的是 mutation，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作。

代碼示例:

代碼總結構

action.js

mutation_type.js

mutations.js

store.js

最后在main.js中引入

頁面使用
this.$store.state.countNum.xx//獲取狀態(tài)中的某個字段
this.$store.dispatch('action中的方法名' , '參數(shù)');//修改狀態(tài)中的字段值