狀態(tài)管理
由于狀態(tài)零散地分布在許多組件和組件之間的交互中，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng)。為了解決這個(gè)問(wèn)題，Vue 提供 vuex：我們有受到 Elm 啟發(fā)的狀態(tài)管理庫(kù)。
目錄
類 Flux 狀態(tài)管理的官方實(shí)現(xiàn)
由于狀態(tài)零散地分布在許多組件和組件之間的交互中，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng)。為了解決這個(gè)問(wèn)題，Vue 提供 vuex：我們有受到 Elm 啟發(fā)的狀態(tài)管理庫(kù)。vuex 甚至集成到 vue-devtools，無(wú)需配置即可進(jìn)行時(shí)光旅行調(diào)試 (time travel debugging)。
React 的開(kāi)發(fā)者請(qǐng)參考以下信息
如果你是來(lái)自 React 的開(kāi)發(fā)者，你可能會(huì)對(duì) Vuex 和 Redux 間的差異表示關(guān)注，Redux 是 React 生態(tài)環(huán)境中最流行的 Flux 實(shí)現(xiàn)。Redux 事實(shí)上無(wú)法感知視圖層，所以它能夠輕松的通過(guò)一些簡(jiǎn)單綁定和 Vue 一起使用。Vuex 區(qū)別在于它是一個(gè)專門為 Vue 應(yīng)用所設(shè)計(jì)。這使得它能夠更好地和 Vue 進(jìn)行整合，同時(shí)提供簡(jiǎn)潔的 API 和改善過(guò)的開(kāi)發(fā)體驗(yàn)。
簡(jiǎn)單狀態(tài)管理起步使用
經(jīng)常被忽略的是，Vue 應(yīng)用中原始數(shù)據(jù)對(duì)象的實(shí)際來(lái)源 - 當(dāng)訪問(wèn)數(shù)據(jù)對(duì)象時(shí)，一個(gè) Vue 實(shí)例只是簡(jiǎn)單的代理訪問(wèn)。所以，如果你有一處需要被多個(gè)實(shí)例間共享的狀態(tài)，可以簡(jiǎn)單地通過(guò)維護(hù)一份數(shù)據(jù)來(lái)實(shí)現(xiàn)共享：
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})現(xiàn)在當(dāng) sourceOfTruth 發(fā)生變化，vmA 和 vmB 都將自動(dòng)的更新引用它們的視圖。子組件們的每個(gè)實(shí)例也會(huì)通過(guò) this.$root.$data 去訪問(wèn)?，F(xiàn)在我們有了唯一的數(shù)據(jù)來(lái)源，但是，調(diào)試將會(huì)變?yōu)樨瑝?mèng)。任何時(shí)間，我們應(yīng)用中的任何部分，在任何數(shù)據(jù)改變后，都不會(huì)留下變更過(guò)的記錄。
為了解決這個(gè)問(wèn)題，我們采用一個(gè)簡(jiǎn)單的 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 中去管理。這種集中式狀態(tài)管理能夠被更容易地理解哪種類型的 mutation 將會(huì)發(fā)生，以及它們是如何被觸發(fā)。當(dāng)錯(cuò)誤出現(xiàn)時(shí)，我們現(xiàn)在也會(huì)有一個(gè) log 記錄 bug 之前發(fā)生了什么。
此外，每個(gè)實(shí)例/組件仍然可以擁有和管理自己的私有狀態(tài)：
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
重要的是，注意你不應(yīng)該在 action 中 替換原始的狀態(tài)對(duì)象 - 組件和 store 需要引用同一個(gè)共享對(duì)象，mutation 才能夠被觀察
接著我們繼續(xù)延伸約定，組件不允許直接修改屬于 store 實(shí)例的 state，而應(yīng)執(zhí)行 action 來(lái)分發(fā) (dispatch) 事件通知 store 去改變，我們最終達(dá)成了 Flux 架構(gòu)。這樣約定的好處是，我們能夠記錄所有 store 中發(fā)生的 state 改變，同時(shí)實(shí)現(xiàn)能做到記錄變更 (mutation)、保存狀態(tài)快照、歷史回滾/時(shí)光旅行的先進(jìn)的調(diào)試工具。
說(shuō)了一圈其實(shí)又回到了vuex，如果你已經(jīng)讀到這兒，或許可以去嘗試一下！