Vuex Ajax Anruf und mehrere Komponenten

Question

Ich würde gerne wissen, was ist die beste Praxis für einen Ajax-Anruf mit Vuex und mehrere Komponenten teilen die Daten von diesem Anruf.

Speichere ich eine Lade-, Erfolgs- und Fehlereigenschaft für diesen Aufruf im Speicher, sodass er vollständig in die Komponenten eingefügt wird? Ich bin mir nicht sicher, was der beste Weg ist. Ich möchte auch nicht den Ajax von allen Komponenten nennen, da dies den Zweck des einmaligen Aufrufs zunichte macht.

Im Moment bin ich zu speichern, wie ich oben erwähnt:

new Vuex.Store({ 
    state: { 
     persons: { 
      data: null, 
      loading: false, 
      error: null 
     } 
    } 
}); 

Ich tue dies für jeden Anruf api und dann habe ich dort speichern. Irgendwelche besseren Möglichkeiten?

Answer 1

This article beschreibt einige Muster zum Implementieren von Ajaxaufrufen und Aktualisieren von Vuex-Status. Persönlich stimme ich dem Autor zu, dass Methode 3, Ihre Ajax-Aufrufe als Aktionen in den vuex-Store zu verschieben, da sie, wie der Artikel heraushebt, die Logik von Status und Präsentation entkoppelt. Dies ist auch hilfreich, weil Sie ein Versprechen aus Ihrer Aktion zurückkehren zu wissen, wann der Staat kann

Code-Beispiel aus dem Artikel mutiert wird:

store = new Vuex.Store({ 
    state: { 
     message: '' 
    }, 
    mutations: { 
     updateMessage(state, payload) { 
      state.message = payload 
     } 
    }, 
    actions: { 
     refreshMessage(context) { 
      return new Promise((resolve) => { 
       this.$http.get('...').then((response) => { 
        context.commit('updateMessage', response.data.message); 
        resolve(); 
       }); 
      }); 
     } 
    } 
}); 

Vue.component('my-component', { 
    template: '<div>{{ message }}</div>', 
    methods: { 
     refreshMessage() { 
      this.$store.dispatch('refeshMessage').then(() => { 
      // do stuff 
     }); 
     } 
    }, 
    computed: { 
     message: { return this.$store.state.message; } 
    } 
}); 

So wie Sie hier sehen können, sind Ajax-Aufrufe gekapselt als vuex Aktionen. In einer Komponente, die auf Daten von einem Ajax-Aufruf angewiesen ist, kann die Komponente die Aktion ausführen (diese. $ Store.dispatch ('refreshMessage'). Dann ...), die den Ajax aufrufen und die Daten im Speicher aktualisieren wird. Da Ihre Komponente bereits über eine reaktive Eigenschaft verfügt, die von den Daten des Geschäfts abhängt, wird sie automatisch aktualisiert, sobald der Speicher neue Daten enthält.