Watch in Vuejs/Nuxtjs kann Änderungen in Objektarrays aus dem Vuex Store nicht überwachen

Question

Ich verwende Vuejs/Nuxtjs 在此应用程序中开发一个应用程序，我有一个组件 IdentifiersNode.vue ，我想在其中监视 Vuex 存储数组 identifiersArray.

Ich kann beobachten, dass identifiersArray 的直接更改，例如 push、直接键值更改，但是当我向 identifiersArray 中的对象添加新对象时，watch aus irgendeinem Grund nicht funktionieren wird.

Hier ist meine IdentifiersNode.vue中的watch Funktion:

watch: {
    '$store.state.modules.identifiersInfoStore.identifiersArray': {
        handler (val) {
            console.log('WATCH : ' + JSON.stringify(val, null, 4))
        },
        deep: true
    }
},

Folgendes ist in Vuex 存储中我的 identifiersArray 发生的更改 endcphpcn 存在于 identifiersInfoStore .js:

saveIdentifiersInfo (state, payload) {
    // Upon saving the Identifiers info save the information into respective object of identifiersArray
    const identifiersNode = state.identifiersArray.find(node => node.identifiersId === state.currentNodeId)

    console.log('NODE BEFORE : ' + JSON.stringify(identifiersNode, null, 4))
    
    identifiersNode.instanceData = payload.instanceData
    
    console.log('NODE ARRAY AFTER : ' + JSON.stringify(state.identifiersArray, null, 4))
},

Wie wir sehen, arbeite ich daran identifiersArray 中的现有对象添加一个对象，但是当我这样做时，我希望我的 watch 函数在 IdentifiersNode.vue 中触发，因为我有 deep: true, aber aus irgendeinem Grund funktioniert es überhaupt nicht.

Kann mir jemand sagen, ob ich mit Vuex store 和 Vue watch auch nur einminütige Änderungen an einem Array erkennen kann? Wenn nicht, welche Alternativen kann ich wählen?

Das Folgende ist von console.log identifiersNode:

NODE BEFORE : {
    "identifiersId": 1,
    "name": "identifiersNode1"
}

Das Folgende ist von console.log state.identifiersArray:

NODE ARRAY AFTER : [
    {
        "identifiersId": 1,
        "name": "identifiersNode1",
        "instanceData": {
            "name": "Batman",
            "job":"IT"
        }
    }
]

Answer 1

如果您使用 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
})

组件

以下是一个 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)
   } 
}

Answer 2

提供答案可能会对将来的其他人有所帮助。

我实际上是将对象附加到 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 })