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）、保存状态快照、历史回滚/时光旅行的先进的调试工具。