Vue | 30 規模化 - 狀態管理

類Flux官方實現

由於多個狀態分散在不同的組件和組件直接的交互中，大型應用常常變得複雜。爲了解決這個問題，Vue提供了vuex：我們有受到Elm啓發的狀態管理庫。它甚至集成進了vue-devtools，無需配置即可進行時光旅行調試。

React 開發者參考以下信息

如果你來自React開發者，你可能想知道vuex和redux的差異,Redux是Flux生態中最流行的實現。Redux事實上無法感知視圖層，所有它通過Vue的一些簡單綁定很容易使用。Vuex的不同之處在於它是專門爲Vue應用所設計。這允許它和Vue更好的集成，提供一個更爲簡單的API和提升開發體驗。

簡單的狀態管理起步

常常被忽略的是Vue應用的原生的數據對象的真實來源。一個Vue實例只是簡單的代理訪問。因此，如果你有一些通過多個實例共享的狀態，你可以通過identity來共享它：

const sourceOfTruth = {}

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

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

現在無論sourceTruth何時改變，vmA 和vmB都將自動更新他們的視圖。這些實例的子組件也可以通過this.$root.$data訪問。我們有一個唯一的數據來源，但是測試可能是一場噩夢。在任何部分任何時間我們的app都可能改變，不會留下改變的記錄。

爲了幫助解決這個問題，我們採用一個簡單的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 trigged')
		this.state.message = ''
	}
}

注意所有store的state的狀態改變都會放在store本身的actions中管理。這種中心狀態管理能夠更容易的理解哪種mutations類型的狀態將會發生改變和他們如何被觸發。現在，當有錯誤發生的時候，我們有一個log記錄導致錯誤發生的原因。

此外，每一個實例/組件仍然擁有和管理自己的私有狀態：

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

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

重要提示你絕不能在actions裏面替換原始的狀態對象-組件和store需要去共享應用同一個對象，mutation才能被觀察。

接着我們繼續延伸約定，組件不允許直接修改store實例的state，而應該分發事件執行actions去通過store，我們最終達成了Flux框架。這個框架的好處是我們能夠記錄所有改變的發生給到store和實現高級調試工具記錄變更，快照，和歷史回滾/時光旅行。

說了一圈又回到vuex，所以如果你讀到這，可以嘗試去試一下。