Vuejs/Nuxtjs中的watch無法監聽來自Vuex Store中的物件陣列的變化

Question

我正在使用Vuejs/Nuxtjs在此應用程式中開發一個應用程序，我有一個元件IdentifiersNode.vue，我想在其中監視Vuex儲存數組identifiersArray。我可以觀察identifiersArray的直接更改，例如push、直接鍵值更改，但是當我向identifiersArray中的物件添加新物件時，watch將因某種原因無法運作。以下是我的IdentifiersNode

P粉846294303 · Answer

如果您使用 vuex，我建議使用 mapGetters 從商店取得您的商品。這將自動監視值並在每次項目變更時重新渲染。

這裡是文檔：文檔

#小例子

商店

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  data: ["Hello", "world"]
};

const mutations = {
  addItem(state, item) {
    state.data.push(item);
  }
};

const getters = {
  getData: (state) => state.data
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

元件



sssccc

以下是一個 codepen 作為範例： https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/components/HelloWorld.vue

如果您�%B

P粉561323975 · Answer

提供答案可能對未來的其他人有所幫助。

我實際上是將物件附加到 Vuex Store 中陣列中的現有物件中。因此，手錶無法辨識變化。我將其更改為 vue.set 這對我有用。

以前我使用附加到現有物件：

identifiersNode.instanceData = payload.instanceData

後來我改為：

// Use the Vue reactive approach to add the instanceData object to existing object
Vue.set(identifiersNode, 'instanceData', payload.instanceData)

以下是我在Vue組件�%B

#小例子

商店

元件

{{ data }}