Question

我有两个Vue组件在商店中使用通用数组，如下所示：

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绑定。但是the method given in the docs（至少对于concat）在商店的情况下不起作用（或者我可能缺少什么东西？）。

目前，我发现的唯一方法是使用push，$remove或$set的foreach，具体取决于操作，并不是那么优雅和实用。< / p>

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

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

但是为了取代它会变得更加丑陋。什么是正确的方法？

（有关信息，我没有使用Vuex进行状态管理，我现在不打算，我保持简单）

Answer 1

要使作业完成，你可以使用＆＃34; state＆＃34;在你的组件中像这样：

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

然后使用state.myArray。这样，如果你做store.state.myArray = newValue，它就不会破坏绑定。

Vue.js - 在商店中向数组添加或设置新数据

1 个答案: