时间戳

首页 > 解决方案 > 如何使用 Vue/Vuex 设置动态对象值？

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

问题描述

我正在努力了解如何使用 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他们也必须是被动的。

标签： javascriptvue.jsvuex

解决方案

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]);

推荐阅读