javascript - 如何使用 Vue/Vuex 设置动态对象值？

Question

我正在努力理解如何使用 Vue/Vuex 动态创建和填充我所在州的对象中的键:值对，这是一个示例: dataObject:{}(处于状态)，以及创建新键:值对的突变:

  setdataObjectProps: (state, payload) => {
    for (let [key, value] of Object.entries(
      state.dataObject
    )) {
      if (key == payload[0]) {
        dataObject.total_operation_time = payload[1];
        dataObject.machine_name = payload[2];
      }
    }
  },

此解决方案有效，但键:值对应该已经存在于对象中(我已将它们设置为空字符串)。 我尝试像这样使用 Vue.set() :

Vue.set(dataObject.total_operation_time,  payload[1]);
Vue.set(dataObject.machine_name,  payload[2]);

但是，如果我理解正确的话，我很难理解如何使其工作，因为它需要第二个参数，即索引/名称。有人可以像我五岁一样解释一下如何使其工作而不必先在对象中创建键:值对吗？ 提前致谢! 附:他们还必须使用react。

Answer 1

Vue set 应该只在您以错误的方式使用它时完成工作:

Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. this.myObject.newProperty = 'hi').

但是函数参数看起来像这样

• {Object | Array} target
• {string | number} propertyName/index
• {any} value

https://v2.vuejs.org/v2/api/#Vue-set

在你的情况下应该是:

Vue.set(state.dataObject, 'total_operation_time',  payload[1]);
Vue.set(state.dataObject, 'machine_name',  payload[2]);