Vue .set () и pu sh () для магазина Vuex

Question

У меня есть мутатор, который пытается выполнить следующее обновление:

state.forms[1].data.metrics.push(newArrayItem)

• forms - это объект с 1 в качестве ключа
• metrics - это массив

По какой-то причине Vuex успешно обновляется, но компоненты не реагируют на это изменение. Я читал о Vue.set() о https://vuejs.org/v2/guide/list.html#Object -Change-Detection-Caveats

Но я не уверен, как его применить, или даже если это правильный ответ вообще здесь .

Спасибо за помощь.

this.$forceUpdate работает, что немного странно, поскольку компонент, загружающий данные, использует computed свойства.

Состояние формы Первоначально настроить так:

const state = {
  forms: {}
};

Новые формы нажимаются так:

state.forms[id] = { formName: payload.formName, data: {metrics: []}};

И новые метрики добавляются так:

var result = getParent(state, payload.path);

result.metricParent.data.metrics.push({ id: newMetricId(state, result.formId), ...payload.metric });

Answer 1

Ваша проблема не в том, чтобы выдавать массивы. Ваша проблема в этой строке:

state.forms[id] = { formName: payload.formName, data: {metrics: []}};

Поскольку вы создаете новое свойство state.forms без использования Vue.set(), форма не реагирует, поэтому при вводе pu sh в массив метрик позже он не распознается.

Вместо этого вы должны сделать следующее:

Vue.set(state.forms, id, { formName: payload.formName, data: {metrics: []}});

Затем нажатие на state.forms[id].data.metrics должно работать как положено.

Answer 2

Vue настроить реактивные данные, ища, как настроено состояние / данные, например, если в обычном компоненте вы определяете данные как {x: {y: 10}}, и вы как-то меняете данные this.xy = 20; это сработает, потому что vue делает объект с этой структурой реактивным (потому что это структура установки), основываясь на том, что если вы попытаетесь это сделать, this.xz = 10; не работает, потому что «z» не существует, и вам нужно сообщить vue, что вам нужно сделать его реактивным, вот когда this. $ set (this.x, «z», 10); входит, это в основном говорит «сделать эту ссылку на данные в позиции 'z' реактивной», после этой точки прямые вызовы this.xz =? работает, в vuex происходит то же самое, используйте Vue .set (state.forms, 1, {formName: payload.formName, data: {metrics: []}}); после этого ссылка на state.forms [1] (включая вложенные данные) теперь реагирует!