狀態管理

類 Flux 狀態管理的官方實現

由於狀態零散地分佈在許多元件和元件之間的互動中，大型應用複雜度也經常逐漸增長。為了解決這個問題，Vue 提供 vuex：我們有受到 Elm 啟發的狀態管理庫。vuex 甚至整合到 vue-devtools，無需配置即可進行時光旅行除錯。

React 的開發者請參考以下資訊

如果你是來自 React 的開發者，你可能會對 Vuex 和 Redux 間的差異表示關注，Redux 是 React 生態環境中最流行的 Flux 實現。Redux 事實上無法感知檢視層，所以它能夠輕鬆的通過一些簡單繫結和 Vue 一起使用。Vuex 區別在於它是一個專門為 Vue 應用所設計。這使得它能夠更好地和 Vue 進行整合，同時提供簡潔的 API 和改善過的開發體驗。

簡單狀態管理起步使用

經常被忽略的是，Vue 應用中原始資料物件的實際來源 - 當訪問資料物件時，一個 Vue 例項只是簡單的代理訪問。所以，如果你有一處需要被多個例項間共享的狀態，可以簡單地通過維護一份資料來實現共享：

const sourceOfTruth = {}

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

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

現在當 sourceOfTruth 發生變化，vmA

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

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

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

此外，每個例項/元件仍然可以擁有和管理自己的私有狀態：

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

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

重要的是，注意你不應該在 action 中 替換原始的狀態物件 - 元件和 store 需要引用同一個共享物件，mutation 才能夠被觀察

接著我們繼續延伸約定，元件不允許直接修改屬於 store 例項的 state，而應執行 action 來分發 (dispatch) 事件通知 store 去改變，我們最終達成了 Flux 架構。這樣約定的好處是，我們能夠記錄所有 store 中發生的 state 改變，同時實現能做到記錄變更 (mutation)、儲存狀態快照、歷史回滾/時光旅行的先進的除錯工具。

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

from: https://cn.vuejs.org/v2/guide/state-management.html