Vuex getter 反应性问题（结合 Vue 路由器）

Question

我有一个Vuex getter，它应该获取当前路由的所有相关数据，然后将其显示在Vuetify <v-data-table>中，它在创建组件时完全可以正常工作。 但是，当我在getter使用的相关state的数据Array中创建一个新条目时，它只会在我离开当前路线时获取并显示新条目。 我使用当前路由作为键来识别state中的不同条目，因此我可以显示当前路由的不同信息，因此是Vue router 。 我不确定是否清楚地解释了我的问题（对不起，英语不是我的第一语言），所以这是我认为相关的代码：有问题的吸气剂：

  computed: {
    ...mapGetters({
      geData: "geData"
    }),
    getAllData() {
      return this.geData[this.$route.path];
    }
  }

数据表：

<v-data-table :headers="headers" :items="getAllData" hide-actions>
  <template v-slot:items="props">
        <td class="text-xs-left">{{ props.item.name }}</td>
        <td class="text-xs-left">{{ props.item.state}}</td>
        <td class="text-xs-left">{{ props.item.created_at }}</td>
        <td class="text-xs-left">{{ }}</td>
      </template>
</v-data-table>

这是我如何修改存储mutation中的数组：

  setNewData: (state, Data) => {
    state.Data[Data[0]] = Data[1];
  }

第一个Data[0]是用作键的路由，第二个Data[1]是新数据。 我怀疑只有在我离开当前路线时才会更新getter的原因是因为我使用路线作为键，但我不确定，我不知道是否是这种情况如何解决问题，所以任何想法，欢迎指点，在此先感谢！

Answer 1

您需要使用Vue.set ，因为 object 键不响应，除非首先声明：

Vue.set(state.Data, Data[0], Data[1])

这应该让你得到你正在寻找的反应性。

边注：

确保state.Data是响应式的，首先将其初始化为 object。

Answer 2

尝试这个：

setNewData: (state, Data) => {
  Vue.set(state.Data, Data[0], Data[1])
}

如果该文件中还没有Vue ，则需要导入它。

请参阅https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 。

我在这里假设您正在向 object 添加一个新属性。 如果该属性已经存在，那么您将不需要Vue.set 。

另一种方法是复制 object，在新的 object 反应之前添加新属性：

setNewData: (state, Data) => {
  state.Data = {
    ...state.Data,
    [Data[0]]: Data[1]
  }
}