Vuex01 简单状态管理

发表于 更新于 分类于 阅读次数：

Vue中的简单状态管理方式（不全，新的API和方法都没有添加）

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

但是这会带来调试上无法辨别何人何时改变过数据的问题，为了解决这个问题，可以引入store模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 = ''
  }
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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，完全违反了这个规定。什么都不懂，乱七八糟的代码就上线了

参考