Vue 存储调度单个属性而不是整个对象答案

【问题标题】：Vue store dispatch single property instead whole objectVue 存储调度单个属性而不是整个对象
【发布时间】：2019-07-06 13:51:25
【问题描述】：

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

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

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

更新

我认为我的问题不清楚。

实际上我需要在 dispatch 中访问 memberData 的一个子嵌套属性，以只更改 memberData 的一个元素。老实说，反应是什么并不重要。也可以是 'foo'。

【问题讨论】：

目标是发送response[0] 作为有效负载而不需要将其分配给属性memberData？还是您的意思是发送response[0] 的属性？假设response[0]等于{ name: "foo" }，你的意思是要发送name的值吗？
实际上我需要在调度中访问memberData的子嵌套属性，以仅更改memberData的一个元素。老实说，response 是什么并不重要。也可以是'foo'。
好的，memberData 是否存储在store 中？目标是将特定属性的更改与商店中现有的memberData 对象“合并”吗？你知道什么属性会被改变吗？或者您打算发送一个带有键/值对的对象来表示所需的更改？您能否更新您的问题，忽略 Vue/Vuex，并展示您想用纯 JavaScript 做什么？您的原始对象是什么样的以及将如何使用即将发生的更改？
是的，它存储在store中，我也使用state、mutations、actions和getters。 memberData 是 state 中的一个空对象，将与有效负载一起调度。现在memberData 包含propA: 1, propB: 'bar'。之后我只想更改propB 的值，而不是整个对象。

标签： javascript vue.js ecmascript-6 vuejs2 vuex

【解决方案1】：

如果您查看dispatch 的文档，第二个参数payload 可以是任何类型。它不一定需要是嵌套在属性中的 object-style dispatch：

派送：

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 中使用spread。 Mutations Follow Vue's Reactivity Rules 的 Vuex 文档中也提到了这一点。

派送：

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 的实际操作。

希望对您有所帮助！

【讨论】：

合并对象的更新方案听起来很酷！我会检查的！以后会接受的。谢谢。
dispatch 中是否还有一种方法可以访问 memberData 的子元素并对其进行更改？它在语法上不起作用，但我会告诉你我需要什么：store.dispatch('currentUser', {memberData.systemLanguage: response.systemLangId});
不清楚您的数据结构是什么（在您的问题中，数据response 是一个数组），但我更新了答案和链接的实时示例以显示您如何更改该属性。你不需要做memberData. systemLanguage 因为{ ...this.memberData, ...updates } 将属性合并在一起。
知道了！谢谢！