javascript - Vue.js - 将新数据添加或设置到存储中的数组

Question

我有两个 Vue 组件，它们在商店中使用一个公共(public)数组集，如下所示:

var store = {
    state: {
        myArray: []
    }
};

var FirstComp = Vue.extend({
    template: '#first-template',
    data: function () {
        return {
            arrayData: store.state.myArray
        };
    }
});

/* A second component quite identical */

我遵循了 Vue js guide 中给出的示例.

我正在尝试使用来自另一个数组的新数据(在 ajax 调用之后)更新存储中数组中的数据，以便它影响两个组件。我想要一种用新数组替换/连接旧数组的好方法。我知道我不能像这样替换数组 store.state.myArray = newArrayData; 因为我会松开 Vue 绑定(bind)。但是the method given in the docs (至少对于 concat)在商店的情况下不起作用(或者我可能遗漏了什么？)。

现在，我发现的唯一方法是使用带有 push、$remove 或 $set 的 foreach操作，不是那么优雅和实用。

例如，对于 concat，我这样做:

$.each(newArray, function (i, val) {
    store.state.myArray.push(val);
});

但是更换它会变得更丑。正确的方法是什么？

(关于信息，我没有使用 Vuex 进行状态管理，目前我也不打算这样做，我保持它非常简单)

Answer 1

要使分配工作，您可以像这样在组件中使用“state”:

var FirstComp = Vue.extend({
    template: '#first-template',
    data: function () {
        return {
            state: store.state
        };
    }
});

然后使用state.myArray。这样，如果您执行 store.state.myArray = newValue，它就不会破坏绑定(bind)。