【Vue】vuex冷门实例方法--replaceState

vuex冷门实例方法–replaceState

状态合并

看这段代码：

if (sessionStorage.getItem("store")) {
  this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
  console.log('正在从sessionStorage恢复store')
  console.log(this.$store.state)
  sessionStorage.removeItem("store")
}

我们经常遇到一个问题就是，刷新页面导致状态丢失，一个解决方案就是使用 sessionStorage 随时储存 state，刷新页面出发 created 则判断 sessionStorage.state 是否有内容，有则覆盖原 state

这里注意：

1. replaceState 是覆盖 state ，合并的工作要使用 Object.assign() ，当然了，大部分时候并不需要合并，因为 sessionStorage 里的就是最新的 state ，直接覆盖就行了
2. 尽量避免使用这个方法，在错误的位置使用这个方法会造成数据被错误覆盖，只应该在非常有必要恢复 state 的时候才使用，更多的时候，如果用户刷新页面，应让用户从头走操作流程，只有在连续答题、购物等少数场合需要用到，而且并不是必须使用，依然有其他变通方法

时光旅行调试

时光旅行调试是指 devtools 提供的时光旅行调试，这里提到时光旅行调试，我其实不太明白其中的意思，可能的意思有两个，不是一就是二：

1. devtools 自己调用 replaceState 方法来时光旅行，无需开发者写任何代码
2. 开发者在某些代码位置覆盖 state ，这种可能性比较小