Vue狀態管理之Vuex

Vuex是專爲Vue.js設計的狀態管理模式。採用集中存儲組件狀態它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

一、首先讓咱們從一個vue的計數應用開始

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

　　在這個組件的數據對象中保存着一個初始爲0的狀態值count，咱們能夠經過調用increment方法修改count值，以實現遞增計數功能。

這個狀態自管理應用包含如下幾個部分：

state: 驅動應用的數據源。

view：以聲明的方式將state映射到視圖。

actions: 相應用戶在視圖上輸入致使的狀態變化。 

如下是這個單向數據流的簡單示意圖。

 

可是當遇到多個組件狀態共享時，單向數據流的簡潔性很容易被破壞：

①多個組件依賴同一狀態

②來自不一樣視圖的行爲須要變動同一狀態

對於問題①傳參的方法對於多層嵌套的組件將會很是繁瑣，且對於兄弟組件間的狀態傳遞無能爲力。

對於問題②咱們常常會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。以上的這些模式很是脆弱，一般會致使沒法維護的代碼。

所以將共享狀態抽取出來做爲全局單例模式管理，這就是vuex的基本思想。