Vue.set() 和 push() 用于 Vuex 存储

Question

我有一个尝试进行以下更新的变异器：

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

• forms1是一个作为键的对象
• metrics是一个数组

由于某种原因，Vuex 成功更新，但组件不会对此更改做出反应。Vue.set()我在https://v2.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()，所以该表单不是反应性的，因此当您稍后推送到指标数组时，它不会被识别。

相反，你应该这样做：

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

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