vue.js - Vue.set() 和 push() 用于 Vuex 商店

Question

我有一个 mutator 试图进行以下更新:
state.forms[1].data.metrics.push(newArrayItem)

forms 是一个以 1 为键的对象

metrics 是一个数组

出于某种原因，Vuex 成功更新，但组件不会对此更改使用react。
我正在 https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats 上阅读有关 Vue.set() 的信息

但我不确定如何应用它，或者即使它在这里是正确的答案。

谢谢您的帮助。
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() 的新属性，所以表单不是响应式的，所以当您稍后推送到度量数组时，它不会被识别。

相反，你应该这样做:

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

然后，推送到 state.forms[id].data.metrics 应该会按预期工作。