Question

我有一个带有数组的Vue.js存储，并通过API重新加载后对其进行了设置的变异：

export default new Vuex.Store({
  state: {
    triggeredTests: [],
  mutations: {
    setTriggeredTest(state, data) {
      state.triggeredTests = _
        .chain(data)
        .forEach((item) => {
          item.dateFormatted = moment(item.date).format('DD MMMM YYYY');
          item.explanationTest = testMapping.get(item.test);
        })
        .orderBy('date')
        .groupBy('date')
        .value();
    },
  },
});

我应该使用一些特定的mutation method在此处分配数组以使绑定的组件正确刷新吗？

Answer 1

triggeredTests属性已经在商店中（通过state:），因此Vue添加了更改侦听器，并且state.triggeredTests = newArray触发了更改。

只有在以前不知道属性时，才需要Vue.set(state, 'triggeredTests', newArray)。

但是，仅在侦听对先前数组中的项所做的更改的组件内部可能看不到更改。

使用mapState()并使用triggeredTests变量，可以确保对数组的更改反映在组件中。

computed: mapState({
   item: state => state.triggeredTests.find( ... )
})

Answer 2

如果要重置整个数组，则可以使用Vue.Set（）并创建该数组的副本。下面是它的粗略版本：

export default new Vuex.Store({
state: {
  triggeredTests: [],
},
mutations: {
    MUTATE_ITEMS: (state, items) => {
        Vue.set(state, 'items', [items]);
    }
},
actions: {
    loadTriggeredTests: (context, data) => {
        const newTriggeredTests = array1.map(item => {
            return {
                dateFormatted : moment(item.date).format('DD MMMM YYYY'),
                explanationTest : testMapping.get(item.test)
            }
        });

        context.commit("MUTATE_ITEMS", newTriggeredTests);
    }
}
});

在Vue.js中分配数组的正确方法是什么？

2 个答案: