Vue 状态管理
Posted susanws
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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）、保存状态快照、历史回滚/时光旅行的先进的调试工具。
以上是关于Vue 状态管理的主要内容，如果未能解决你的问题，请参考以下文章