Vuex01 简单状态管理

Vue中对原始数据对象的访问,只是简单的代理访问(也就是引用了同一个地址的数据),所以当一份数据被多个实例共享,不必维护多份数据,只需要维护一份即可。

但是这会带来调试上无法辨别何人何时改变过数据的问题,为了解决这个问题,可以引入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 = ''
  }
}

注意,改变stroestate的行为方法,都应放在store中的action进行统一管理。

这时,每个实例、组件都可以同时拥有来自组件的共享状态和来自自身的私有状态

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去改变

回想起在Exam项目中,使用MOBX,完全违反了这个规定。什么都不懂,乱七八糟的代码就上线了

参考

发布了382 篇原创文章 · 获赞 91 · 访问量 33万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览