Tukar nilai kiraan dalam gedung Vuex apl Vue menggunakan model v
P粉882357979
P粉882357979 2024-03-22 00:31:42
0
1
471

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

P粉882357979
P粉882357979

membalas semua(1)
P粉958986070

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)
    }
  }
})
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan