Regarder dans Vuejs/Nuxtjs ne peut pas surveiller les modifications dans les tableaux d'objets de Vuex Store

Question

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

Je peux observer que identifiersArray 的直接更改，例如 push、直接键值更改，但是当我向 identifiersArray 中的对象添加新对象时，watch ne fonctionnera pas pour une raison quelconque.

Voici ma IdentifiersNode.vue中的watch fonction :

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

Ce qui suit est dans 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))
},

Comme nous pouvons le voir, je travaille sur identifiersArray 中的现有对象添加一个对象，但是当我这样做时，我希望我的 watch 函数在 IdentifiersNode.vue 中触发，因为我有 deep: true mais pour une raison quelconque, cela ne fonctionne pas du tout.

Quelqu'un peut-il me dire si je peux utiliser Vuex store 和 Vue watch pour détecter ne serait-ce qu'une minute de modification d'un tableau ? Si non, quelles alternatives puis-je prendre ?

Ce qui suit provient de console.log identifiersNode :

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

Ce qui suit provient de console.log state.identifiersArray :

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

Answer 1

Si vous utilisez vuex, je vous recommande d'utiliser mapGetters pour récupérer vos articles en magasin. Cela surveillera automatiquement la valeur et restituera à chaque fois que l'élément change.

Voici la documentation : Documentation

Petit exemple

Boutique

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

Composants

sssccc

Voici un codepen à titre d'exemple : https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/components/HelloWorld.vue

Si vous souhaitez modifier une propriété d'objet (ou dans votre cas, ajouter un nouvel objet à un tableau qui est une propriété d'objet), la meilleure chose à faire est de repousser complètement l'objet actuel.

Par exemple, si vous avez un tableau comme [{id: 1,values:[1,2,3]},{id:2,values:[4,5,6]}], vous pouvez mettre à jour les valeurs en utilisant la méthode d'épissage 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

Fournir une réponse peut aider les autres à l'avenir.

J'ajoute en fait l'objet à un objet existant dans un tableau du Vuex Store. La montre ne peut donc pas reconnaître le changement. Je l'ai changé en vue.set et cela a fonctionné pour moi.

Auparavant, j'utilisais l'ajout à un objet existant :

identifiersNode.instanceData = payload.instanceData

Plus tard, je l'ai changé en :

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

Ci-dessous ma montre dans le composant Vue, j'ai utilisé ce code dans mon mounted et il peut également être utilisé dans la montre :

// 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 })