javascript - Vuex：在 Vuex 突变中更新多个状态属性的最佳方法是什么？

Question

我有一个命名空间的 Vuex 突变，我正在尝试一次更新多个状态属性。为了避免重复，我想使用 ES6 扩展运算符。Object.assign 按预期工作，但扩展运算符无法更新 VUEX 状态。这是说明问题的代码：

const authorizationModule = {
  namespaced: true,
  state: {
    status: '',
    jwt: '',
    user: {
      email: ''
    }
  },
  mutations: {
    AUTH_SUCCESS(state, payload) {
      const { jwt, user } = payload;

      // Too much repitition (needs to be abstracted)
      state.jwt = jwt;
      state.status = 'status';
      state.user = user;

      // 1. Object.assign works correctly
      // state = Object.assign(state, {
      //   jwt,
      //   status: 'success',
      //   user
      // });

      // 2. Spread operator does not work
      // let newState = {
      //   ...state,
      //   jwt,
      //   status: 'success',
      //   user
      // }
      // state = newState
    },
  }
}

这很有趣，因为我将调试器放入代码中并在浏览器中检查它。似乎展开运算符的返回值正在返回一个不同的对象。Object.assign 实现似乎在对象中有 getter 和 setter 函数（这就是它按预期工作的原因）。这是我的控制台的图像：

您可以看到第二个示例中的对象缺少某些 Vuex getter 和设置方法。

所以问题仍然存在：是否可以在这种情况下使用扩展运算符来更新 Vuex 中的多个状态属性？

标签： javascriptvue.jsvuejs2vuex