Jika anda menggunakan vuex, saya syorkan menggunakan mapGetters untuk mendapatkan barangan anda dari kedai. Ini secara automatik akan memantau nilai dan memaparkan semula setiap kali item berubah.

Berikut ialah dokumentasi: Dokumentasi

Contoh kecil

Beli

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

Komponen

sssccc

Berikut ialah codepen sebagai contoh: https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/components/HelloWorld.vue

Jika anda ingin menukar sifat objek (atau dalam kes anda menambah objek baharu pada tatasusunan yang merupakan sifat objek), perkara terbaik untuk dilakukan ialah menolak semula objek semasa sepenuhnya.

Sebagai contoh, jika anda mempunyai tatasusunan seperti [{id: 1,values:[1,2,3]},{id:2,values:[4,5,6]}] anda boleh mengemas kini nilai menggunakan kaedah js splicing:

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

Menyediakan jawapan boleh membantu orang lain pada masa hadapan.

Saya sebenarnya menambahkan objek pada objek sedia ada dalam tatasusunan dalam Kedai Vuex. Oleh itu, jam tangan tidak dapat mengenali perubahan itu. Saya menukarnya kepada vue.set dan ini berkesan untuk saya.

Sebelum ini saya gunakan tambahkan pada objek sedia ada:

identifiersNode.instanceData = payload.instanceData

Nanti saya tukar kepada:

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

Di bawah ialah jam tangan saya dalam komponen Vue, saya menggunakan kod ini dalam mounted saya dan ia juga boleh digunakan dalam jam tangan:

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