[Vue]reset-vuex-state

2024-01-31 65 阅读1分钟

如何重置 vuex

错误做法

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

解决方案

Object assign（推荐）

mutations: {
  RESET_STATE (state) {
    Object.assign(state, getDefaultState());
  }
}

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];
  });
}

参考链接