vuex初解教程

什麼是Vuex？

vuex是一個專門爲vue.js設計的集中式狀態管理架構。狀態？我把它理解爲在data中的屬性須要共享給其餘vue組件使用的部分，就叫作狀態。簡單的說就是data中須要共用的屬性。

爲何使用Vuex？

若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。可是，若是您須要構建是一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

vuex組成
state:
存放的數據狀態

getters：

對state中的狀態進行過濾處理

通常處理方法是：
computed: {

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

},
若是有多個組件須要用到此屬性，咱們要麼複製這個函數，或者抽取到一個共享函數而後在多處導入它 —— 不管哪一種方式都不是很理想。

Vuex 容許咱們在 store 中定義『getters』（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

Getters 接受 state 做爲其第一個參數：
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 中的狀態的惟一方法是提交 mutation。
mutation中寫有修改數據的邏輯。

Actions:

Action 提交的是 mutation，而不是直接變動狀態。
Action 能夠包含任意異步操做。

代碼示例:

代碼總結構

action.js

mutation_type.js

mutations.js

store.js

最後在main.js中引入

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