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 le résultat à l'écran. S'il vous plaît, aidez-moi à résoudre ce problème.

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

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