Vue.js 2.0 狀態(tài)管理

類 Flux 狀態(tài)管理的官方實現(xiàn)

由于多個狀態(tài)分散的跨越在許多組件和交互間各個角落，大型應用復雜度也經常逐漸增長。為了解決這個問題，Vue 提供 vuex： 我們有受到 Elm 啟發(fā)的狀態(tài)管理庫。vuex 甚至集成到 vue-devtools，無需配置即可訪問時光旅行。

React 的開發(fā)者請參考以下信息

如果你是來自 React 的開發(fā)者，你可能會對 vuex 和 redux 間的差異表示關注，redux 是 React 生態(tài)環(huán)境中最流行的 Flux 實現(xiàn)。Redux 事實上無法感知視圖層，所以它能夠輕松的通過一些簡單綁定和Vue一起使用。vuex區(qū)別在于它是一個專門為 vue 應用所設計。這使得它能夠更好地和vue進行整合，同時提供簡潔的API和改善過的開發(fā)體驗。

簡單狀態(tài)管理起步使用

經常被忽略的是，Vue 應用中原始 data 對象的實際來源 - 當訪問數(shù)據(jù)對象時，一個 Vue 實例只是簡單的代理訪問。所以，如果你有一處需要被多個實例間共享的狀態(tài)，可以簡單地通過維護一份數(shù)據(jù)來實現(xiàn)共享：

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

現(xiàn)在當 sourceOfTruth 發(fā)生變化，vmA 和 vmB 都將自動的更新引用它們的視圖。子組件們的每個實例也會通過 this.$root.$data 去訪問?，F(xiàn)在我們有了唯一的實際來源，但是，調試將會變?yōu)樨瑝?。任何時間，我們應用中的任何部分，在任何數(shù)據(jù)改變后，都不會留下變更過的記錄。

為了解決這個問題，我們采用一個簡單的 store 模式：

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    this.debug && console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    this.debug && console.log('clearMessageAction triggered')
    this.state.message = 'action B triggered'
  }
}

需要注意，所有 store 中 state 的改變，都放置在 store 自身的 action 中去管理。這種集中式狀態(tài)管理能夠被更容易地理解哪種類型的 mutation 將會發(fā)生，以及它們是如何被觸發(fā)。當錯誤出現(xiàn)時，我們現(xiàn)在也會有一個 log 記錄 bug 之前發(fā)生了什么。

此外，每個實例/組件仍然可以擁有和管理自己的私有狀態(tài)：

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

重要的是，注意你不應該在 action 中 替換原始的狀態(tài)對象 - 組件和 store 需要引用同一個共享對象，mutation 才能夠被觀察。

接著我們繼續(xù)延伸約定，組件不允許直接修改屬于 store 實例的 state，而應執(zhí)行 action 來分發(fā) (dispatch) 事件通知 store 去改變，我們最終達成了 Flux 架構。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變，同時實現(xiàn)能做到記錄變更 (mutation) 、保存狀態(tài)快照、歷史回滾/時光旅行的先進的調試工具。

說了一圈其實又回到了vuex ，如果你已經讀到這兒，或許可以去嘗試一下！