javascript - Vue 存储调度单个属性而不是整个对象

Question

我想知道是否可以仅将单个属性分派(dispatch)到 vuex 存储而不是整个对象。 vuex docs中没有写任何可能性。目前我存储这样的对象:

store.dispatch('currentUser', {
  memberData: 'fooBar'
});

有时我只想从数据库中获取单个值并将其推送到存储中。有办法做到这一点吗？

更新

我认为我的问题不清楚。

实际上，我需要在调度中访问memberData的子嵌套属性，以仅更改memberData的一个元素。老实说，什么 react 并不重要。也可能是“foo”。

Answer 1

如果您查看 dispatch 的文档，第二个参数payload，可以是任何类型。它不一定需要是嵌套在属性中的对象样式调度:

调度:

store.dispatch('currentUser', response[0]);

商店:

state: {
  currentUser: undefined
},
mutations: {
  setCurrentUser(state, currentUser) {
    state.currentUser = currentUser;
  }
},
actions: {
  currentUser(context, payload) {
    context.commit('setCurrentUser', payload);
  }
}

突变:

setCurrentUser(state, currentUser) {
  state.currentUser = currentUser;
}

这是一个example行动中。

更新:

如果目标是合并/更新更改，您可以在object literals中使用传播。 Vuex 文档 Mutations Follow Vue's Reactivity Rules 中也提到了这一点.

调度:

store.dispatch('currentUser', { systemLanguage: response[0].systemLangId });

商店:

state: {
  memberData: { systemLanguage: 'foo' }
},
mutations: {
  updateCurrentUser(state, updates) {
    state.memberData = { ...state.memberData, ...updates };
  }
},
actions: {
  currentUser(context, payload) {
   context.commit('updateCurrentUser', payload);
  }
}

这是一个example的行动。

希望有帮助!