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

如果您想更改对象属性（或者在您的情况下将新对象添加到作为对象属性的数组中），最好的办法是完全重新推送当前对象。

例如，如果您有一个像 [{id: 1,values:[1,2,3]},{id:2,values:[4,5,6]}] 这样的数组，您可以更新值使用 js 拼接方法：

addValue(state, {id, valueToAdd}){
   const pos = state.arr.findIndex(x => x.id === id)
   if (pos !== -1){
      const newObj = {...state.arr[pos]}
      newObj.values.push(value)
      state.arr.splice(pos, 1, newObj)
   } 
}

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组件中的手表，我在我的mounted中使用了这段代码，也可以在手表中使用：

// Watch for the changes on the identifiers array 
this.$watch('$store.state.modules.identifiersInfoStore.identifiersArray', (val) => {
    console.log(JSON.stringify(val,null,4))
}, { immediate: true, deep: true })

小例子

商店

组件

{{ data }}