Tonton dalam Vuejs/Nuxtjs tidak boleh memantau perubahan dalam tatasusunan objek daripada Vuex Store

Question

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

Saya dapat perhatikan bahawa identifiersArray 的直接更改，例如 push、直接键值更改，但是当我向 identifiersArray 中的对象添加新对象时，watch tidak akan berfungsi atas sebab tertentu.

Ini adalah fungsi IdentifiersNode.vue中的watch saya:

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

Berikut ada dalam 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))
},

Seperti yang kita lihat, saya sedang berusaha identifiersArray 中的现有对象添加一个对象，但是当我这样做时，我希望我的 watch 函数在 IdentifiersNode.vue 中触发，因为我有 deep: true tetapi atas sebab tertentu ia tidak berfungsi sama sekali.

Bolehkah seseorang memberitahu saya jika saya boleh menggunakan Vuex store 和 Vue watch untuk mengesan walaupun satu minit perubahan pada tatasusunan? Jika tidak, apakah alternatif yang boleh saya ambil?

Berikut adalah daripada console.log identifiersNode:

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

Berikut adalah daripada console.log state.identifiersArray:

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

Answer 1

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

Answer 2

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