VueJS - Vuex Daten in einer Mutation zuweisen

Question

Ich gewöhne mich an Vuex, da ich in der Lage sein muss, einen Speicher zu haben, auf den ich leicht zugreifen und aktualisieren kann, wenn eine andere Komponente geändert wird.

Derzeit meine store sieht wie folgt aus:

import vue from 'vue'; 
import Vuex from 'vuex'; 

vue.use(Vuex); 

export default new Vuex.Store({ 
    state: { 
     users: { 

      columns: [], 
      model: [], 

     } 
    }, 

    mutations: { 
     fetchUsers: function(state) { 
      axios.get(`/users?search_input=`) 
      .then(function(response) { 


      }); 
     } 
    } 

}); 

Die columns und model wird dynamisch nach unten gezogen von einem Ajax-Request und meine Users sieht wie folgt aus:

<script> 

    export default { 

    mounted() { 
     this.$store.commit('fetchUsers'); 
    }, 
    computed: { 
     columns() { 
      return this.$store.state.users.columns; 
     } 

     model() { 
      return this.$store.state.users.model 
     } 
    }, 
    } 

</script> 

Mein Problem ist, dass die Anwendung Daten von Ajax geladen haben muss. Zum Beispiel columns werden von einer AJAX-Anfrage in fetchUsers und innerhalb der Users ich this.$store.commit('fetchUsers'); setzen, aber gibt es eine alternative Möglichkeit, die ich tun kann, ohne commit vorzugsweise im Laden selbst zu verwenden?

Answer 1

Im Laden u ur Daten asynchron geladen werden können über Aktionen dann die Änderungen verpflichten, eine Mutation verwendet wird.

import vue from 'vue'; 
import Vuex from 'vuex'; 

vue.use(Vuex); 

export default new Vuex.Store({ 
    state: { 
     users: { 
      columns: [], 
      model: [], 

     } 
    }, 

    actions: { 
     fetchUsers: function(context) { 
       axios.get(`/users?search_input=`) 
       .then(function(response) { 

        context.commit("FETCHUSERS", { 
        columns: response.columns, 
        model: response.model 
        }); 
       }); 
     } 
    } 
    mutations: { 
     FETCHUSERS: function(state, payload) { 
       state.users.columns = payload.columns; 
       state.users.model = payload.model; 
     } 
    } 

}); 

Versand die Aktion von der Komponente

<script> 

export default { 

    ..... 
    methods: { 
     fetchUsers: function() { 
      this.$store.dispatch("fetchUsers"); 
     } 
    } 

Answer 2

Mutationen müssen synchron sein: https://vuex.vuejs.org/en/mutations.html

Sie Ajax-Request in actions bewegen sollte, die async sein kann. Sie erhalten Daten in der action, Commit-Mutation, die empfangene Daten als Nutzlast angibt, und die Mutation weist der State-Eigenschaft einen Wert zu.

Alternativ können Sie Asynchron-Anfrage in Komponentenmethode machen und einen Wert an die Speichereigenschaft direkt zuweisen: this.$store.state.prop = value