Modifier la valeur du nombre dans le magasin Vuex de l'application Vue à l'aide de v-model

Question

Ce code ne génère pas d'erreur mais lorsque je modifie le décompte, il n'affiche pas les résultats à l'écran. S'il vous plaît, aidez-moi à résoudre ce problème. importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{lists:[{title:"User",count:15,},{title:"Admin",count:

P粉958986070 · Answer

Tout d'abord, vous n'avez pas besoin de v-model pour mettre à jour votre boutique. Vous pouvez créer des copies locales et les mettre à jour instantanément.

Deuxième chose, je ne pense pas que vous souhaitiez mettre à jour le nombre total de chaque objet, mais je pense que vous souhaitez mettre à jour un élément en particulier.

Voici ce que je vais faire :

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