如何使用 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]);

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

Answer 1

Vue set 应该只在您以错误的方式使用它时才能完成工作：向响应式对象添加属性，确保新属性也是响应式的，从而触发视图更新。这必须用于向响应式对象添加新属性，因为 Vue 无法检测正常的属性添加（例如 this.myObject.newProperty = 'hi'）。但是函数参数看起来像这样{对象 | 数组} 目标{字符串 | number} 属性名称/索引{any} 值https://vuejs.org/v2/api/#Vue-set在你的情况下，它应该是：Vue.set(state.dataObject, 'total_operation_time',  payload[1]); Vue.set(state.dataObject, 'machine_name',  payload[2]);