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]
  }
}