004-vuex强制对state进行赋值发生什么？

或许我们从来都没有这么弱鸡的想法，因为在使用vuex时一般通过action触发mutation再操作store。那么如果真这样子操作会怎么样呢？

this.$store.state = {count: 100}

强制对state进行发生什么？
如果在开发环境，控制台会报错并提示我们："Error: [vuex] use store.replaceState() to explicit replace store state."
也就是说vuex并不允许我们直接对state进行赋值，好奇vuex是如何办到了呢？

先看这段代码：

class Store {
}

let store = new Store()
store.state = {count: 100}
console.log(store.state) //=> {count: 100}

相信这段代码没有什么问题，就是一个赋值，一个取值打印，接下对这段代码修改一下

class Store {
  constructor () {
    this._state = {}
  }
  get state () {
    return this._state
  }
  set state (v) {
    console.log('不要对state直接进行赋值')
  }
}

let store = new Store()
store.state = {count: 100} // 控制台就会打印 "不要对state直接进行赋值"

所先在实例化的时候this._state = {}，然后取state 的时候返回this._state,set的时候就屏蔽掉，不允许操作。对，vuex就是这样子。

如果我们不直接操作state，而是对他下的属性进行添加属性呢？

class Store {
  constructor () {
    this._state = {}
  }
  get state () {
    return this._state
  }
  set state (v) {
    console.log('不要对state直接进行赋值')
  }
}

let store = new Store()

store.state.count = 100
console.log(store.state) //=> {count: 100}

这时候能正常赋值了，它的本质是拿到store.state，他实际上引用的是this._state，然后对这个对象添加属性。我们回到vuex

this.$store.state.count = 100

vuex同样对state添加属性同样是可以的，但是这样子的操作vue-devtool就无法监听了。

最后分享一下vuex里面的源码：

  get state () {
    return this._vm._data.$$state // state 藏身在此
  }

  set state (v) {
    // 如果是开发环境就提示信息
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `use store.replaceState() to explicit replace store state.`)
    }
  }