Vuex 商店的 Vue.set() 和 push()

Question

我有一个尝试进行后续更新的 mutator：

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

• forms 是一个以1 为键的对象
• metrics 是一个数组

由于某种原因，Vuex 成功更新，但组件没有对此更改做出反应。 我在 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: []}};

因为您在没有使用Vue.set() 的情况下创建state.forms 的新属性，所以表单不是反应式的，因此当您稍后推送到指标数组时，它无法识别。

相反，您应该这样做：

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

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

Answer 2

Vue 设置响应式数据以查找状态/数据的设置方式，例如，如果在常规组件中定义 {x: {y: 10}} 之类的数据并以某种方式更改数据 this.x.y = 20; 它会起作用，因为 Vue 使具有该结构的对象是响应式的（因为是设置结构），如果您尝试这样做，this.x.z = 10; 不起作用，因为“z”不存在，您需要告诉 Vue 您需要使其具有响应性，这是当this.$set(this.x, “z”, 10);进入时，它基本上是在说“让这个数据在位置'z'反应”，之后直接调用this.x.z = ?工作，在vuex中也是如此，使用Vue.set(state.forms, 1, { formName: payload.formName, data: {metrics: []}});之后引用@987654327 @（包括子数据）现在是反应式的！