Vue 狀態管理

類flux狀態管理的官方實現

因爲多個狀態分散的跨越在許多組件和交互間的各個角落，大型應用複雜度也常常逐漸增加。

爲了解決這個問題，vue提供了vuex：咱們有收到elm啓發的狀態管理庫，vuex甚至集成到vue-detools。無須配置便可訪問時光旅行。

簡單狀態管理起步使用

常常被忽略的是，Vue應用中原始數據對象的實際來源-當訪問數據對象時，一個vue實例只是簡單的代理訪問。因此，若是你有一處須要被多個實例間共享的狀態，能夠簡單的經過維護一份數據來實現共享：

const sourceOfTruth = {}

const vmA = new Vue({

data:sourceOfTruth

})

const vmB = new Vue({

data:sourceOfTruth

})

如今當sourceOfTruth發生變化，vmA和vmB都將自動的更新引用他們的視圖。子組件們的每一個實例也會經過this.$root.$data去訪問。如今咱們有了惟一的實際來源，可是調試會成爲噩夢。任什麼時候間，咱們應用中的任何部分，在任何數據改變後，都不會留下變動過的紀錄。

爲了解決這個問題，咱們採用一個簡單的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('setMessage 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）、保存狀態快照、歷史回滾/時光旅行的先進的調試工具。