javascript - 使用对象分配来清除状态

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 :

Warning for Deep Clone For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.