Question

这是我的状态：

export default new Vuex.Store({
  state: {
    items: [
    ],
    user: {
      isAuthenticated: false,
      info: {
        createdAt: '',
        email: '',
        firstName: '',
        id: '',
        lastName: '',
      },
      token: {
        accessToken: '',
        expiresIn: '',
        refreshToken: '',
        tokenType: '',
      },
    },
  },
  actions,
  mutations,
  getters,
  plugins: [createPersistedState({
    key: 'persistedState',
    paths: ['user'],
  })],
  strict: process.env.NODE_ENV !== 'production',
});

我单独保留用户的默认状态 - 所以我不必在必要时手动重置每个属性。

export const defaultUser = {
  isAuthenticated: false,
  info: {
    createdAt: '',
    email: '',
    firstName: '',
    id: '',
    lastName: '',
  },
  token: {
    accessToken: '',
    expiresIn: '',
    refreshToken: '',
    tokenType: '',
  },
};

因此，当触发注销操作时：

export const logout = ({ commit, dispatch }) => {
  commit(types.LOGOUT_USER);
  dispatch('changeStatus', 'You need to login or register.');
};



[types.LOGOUT_USER](state) {
  Object.assign(state.user, defaultUser);
},

但神奇地有时整个用户对象似乎没有被替换...（或者defaultState对象是用最后的值填充的？）

Answer 1

除了其他答案：基本上这个问题是Changes to object made with Object.assign mutates source object的间接重复。

Object.assign可以安全地使用最多2个嵌套级别。

例如Object.assign(myObj.firstProp, myDefaultObj.firstProp);

取自MDN documentation：

Deep Clone警告对于深度克隆，我们需要使用其他替代方法，因为Object.assign（）复制属性值。如果 source值是对象的引用，它只复制它参考值。

使用对象分配来清除状态

1 个答案: