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

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