Question

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

示例：

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

actions: {
  commit ('authUser', {
    email: 'user@gmail.com'
  })
}

我注意到的是，当我只提交一个属性时（在这种情况下＆＃34; email＆＃34;），authUser的所有其他属性的值将是未定义的，只有电子邮件值可用。

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

由于

Answer 1

您在没有定义password属性的情况下传递对象，因此它会相应地更新state对象。

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

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

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

Answer 2

这并不奇怪，这是预期的行为。只需改变你的突变（推荐）方式：

authUser: (state, payload) => {
  state = Object.assign({}, state, payload)
}

Answer 3

虽然其他答案似乎可以解决您的问题，但将与用户相关的项目放入州内的user对象中可能是值得的。最佳做法是预先建立您的州属性，这样您就可以避免使用Vue.set(...)：

state: { user: { email: '', password: '' } }

...然后你可以通过使用点差运算符轻松避免循环：state.user = { ...state.user, ...payload } - 这基本上说＆＃34;取出目前state.user内的所有内容并将其与payload合并，使用state.user＆＃34;

覆盖state.payload中的内容

Vuejs - 提交属性时的Vuex行为

3 个答案: