Как установить значения динамического объекта с помощью 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 должен выполнять работу, только если вы используете его неправильно:

Добавляет свойство к реактивному объекту, гарантируя, что новое свойство также является реактивным, поэтому запускает обновления просмотра. Это необходимо использовать для добавления новых свойств к реактивным объектам, поскольку Vue не может обнаружить нормальные добавления свойств (например, this.myObject.newProperty = 'hi').

Но аргументы функции выглядят так

• {Объект |Массив} target
• {string |число} propertyName / index
• {любое} значение

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

В вашем случае это должно быть:

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