Tukar nilai kiraan dalam gedung Vuex apl Vue menggunakan model v

Question

Kod ini tidak menjana ralat tetapi apabila saya menukar kiraan ia tidak memaparkan hasil pada skrin. Tolong bantu saya menyelesaikan masalah ini.

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        lists: [ 
          {
            title: "User",
            count: 15,
          },
          {
            title: "Admin",
            count: 41,
          },
          {
            title: "Total Members",
            count: 100,
          },
          {
            title: "Manager",
            count: 35,
          }
        ]
      },
      mutations: {
        updateMessage (state, count) {
          state.lists.count = count
        }
      },
      actions: {
      },
      modules: {
      }
    })

Answer 1

Pertama sekali, anda tidak memerlukan model v untuk mengemas kini kedai anda. Anda boleh membuat salinan tempatan dan mengemas kininya serta-merta.

Perkara kedua, saya rasa anda tidak mahu mengemas kini keseluruhan kiraan setiap objek, tetapi saya fikir anda mahu mengemas kini satu item khususnya.

Ini yang saya akan lakukan:

// 1. In component you watch state.lists and copy it immediately on init, deeply & on change:

data() {
  return {
    localCopyOfLists: []
  }
},
watch: {
  state.lists: {
    immediate: true,
    deep: true,
    handler(v) {
      this.localCopyOfLists = this.state.lists.map(x => (x))
    }
  }
}

// 2. Methods to change count of element in local list.

methods: {
  updateItemInArray(index, count) {
    this.localCopyOfLists[index].count = count
    this.store.dispatch('SAVE_NEW_ARRAY', this.localCopyOfLists)
  }
}

// 3. You update your store.

import Vue from 'vue'

export default new Vuex.Store({
  actions: {
    SAVE_NEW_ARRAY ({commit}, payload) {
      commit('UPDATE_ARRAY', payload)
    }
  },
  mutations: {
    UPDATE_ARRAY (state, payload) {
      Vue.set(state, lists, payload)
    }
  }
})