当 vuex getter 返回新数组时，vue v-for 不会更新

Question

我正在尝试创建一个使用 v-for 显示在屏幕上的反应式数组。该数组存储在 vuex 状态数组中，并由 vue 组件使用 vuex getter 进行检索。在组件内部，我可以发送存储提交以删除数组内部的一天内容之一。结果应该是一个大小比之前小一的数组。

从数组中删除一个元素工作正常，当我在负责从存储中获取数组的 vue 组件中 console.log 数组时，我可以看到返回了正确的数组，但是，由于某种原因，仅返回了数组的长度v-for 循环被更新，而不是 v-for 循环内的数据。例如，所讨论的数组是表示日期的字符串数组。屏幕上显示的是所有日期减去原始数组中的最后一个日期（突变后），其中我的状态和控制台日志中的数组显示缺少正确的日期。

以下是我的代码

VUEX商店：

const state = {
   activeDays: []
}

const getters = {
   getActiveDays: function (state) {
      return state.activeDays;
   }
}

const mutations = {
   removeDayFromActiveDays: function( state, day ) {
      const index = state.activeDays.indexOf(day);
      state.activeDays.splice(index, 1);
   }
}

Vue 组件：

<template>
   <div>
      <div v-for="day in activeDays">{{ day }}</div>
   </div>
</template>
<script>
//...
computed: {
   activeDays: function() {
      if (!this.$store.getters['getActiveDays']) {
         return null;
      }
      console.log("Active Days: " this.$store.getters['getActiveDays'])
      return this.$store.getters['getActiveDays']
   }
}
</script>

Answer 1

const mutations = {
  removeDayFromActiveDays: function(state, day) {
    state.activeDays = state.activeDays.filter(existingDay => existingDay !== day);
  }
};

<template>
  <div>
    <div v-for="day in activeDays" :key="day">{{ day }}</div>
  </div>
</template>
<script>
export default {
  computed: {
    activeDays: function() {
      return this.$store.getters['getActiveDays'] || [];
    }
  }
};
</script>

你也可以尝试一下这样的代码吗？