109. reset vuex state（重置 vuex 状态）

原文链接：github.com/ly525/blog/…

关键字 vuex, Object.assign

如何重置 vuex

错误做法

RESET_STATE: (state) => {
  // [Warning]: 下面这种做法是错的，违反 Vue 响应式原则。
  // 参见：https://forum.vuejs.org/t/replacing-state-object-not-updating-getter-in-vuex/10149/8
  state = getDefaultState();
}
复制代码

解决方案

1. Object assign（推荐）

mutations: {
  RESET_STATE (state) {
    Object.assign(state, getDefaultState());
  }
}
复制代码

2. Object.keys

RESET_STATE (state)  {
  // [Warning]: 下面这种做法是错的，违反 Vue 响应式原则。
  // 参见：https://forum.vuejs.org/t/replacing-state-object-not-updating-getter-in-vuex/10149/8
  // state = getDefaultState();

  // 使用如下代码 重置 state，对每个 key 单独赋值
  const defaultState = getDefaultState();
  Object.keys(defaultState).forEach((key) => {
    state[key] = defaultState[key];
  });
}
复制代码

参考链接

1. cn.vuejs.org/v2/guide/in…
2. vuex.vuejs.org/zh/guide/mu…
3. tahazsh.com/vuebyte-res…
4. forum.vuejs.org/t/vuex-repl…
5. stackoverflow.com/questions/4…

转载于:https://juejin.im/post/5c07cb645188250e8465915b