javascript - Vuejs - 提交属性时的 Vuex 行为

Question

当我尝试改变状态 obj 中的属性时，我注意到 Vuex 中有一个奇怪的行为。

例子：

Mutation: {
  authUser: (state, payload) => {
   state.email = payload.email
   state.password = payload.password
   ...someOtherProps
}

actions: {
  commit ('authUser', {
    email: '[e-mail]'
  })
}

我注意到的是，当我只提交一个属性（在本例中为“电子邮件”）时，authUser 的所有其他属性的值将是未定义的，并且只有电子邮件值可用。

这就是 Vuex 在这种情况下的行为方式吗？如果是，我怎样才能避免其他道具没有得到空值？

谢谢

标签： javascriptvue.jsvuejs2vuex

Answer 1

您正在传递一个没有password定义属性的对象，因此它将state相应地更新该对象。

我只是遍历 的属性payload来更新每个相关的state对象属性。正如@82Tuskers 指出的那样，Vue.set如果对象中的属性在payload对象上尚不存在，则需要使用state（否则该属性不会是反应性的）：

authUser: (state, payload) => {
  for (prop in payload) {
    if (state.hasOwnProperty(prop)) {
      state[prop] = payload[prop];
    } else {
      Vue.set(state, prop, payload[prop]);
    }
  }
}

这样，只有在对象中传递的属性payload才会在对象上更新state。