Wo gebe ich meine Server-REST-Logik in vue/vuex ein

Question

In einer Vue + Vuex-Anwendung ...

Ich habe eine Liste von Elementen. Wenn ich ein neues Objekt im Client erstelle, sollte dieses Objekt auch auf dem Server erstellt werden. Der Server sollte die ID des neuen iem bereitstellen.

Also brauchen wir einen Rundgang, bevor wir den Zustand aktualisieren können.

Nun, stelle ich diesen AJAX-Aufruf in Vuex 'Aktionen' oder in Vuex 'Mutationen'? Was ist Best Practices hier?

Answer 1

In Vuex sind Mutationen synchrone Transaktionen, daher sollten Sie asynchrone Arbeiten (wie AJAX-Aufrufe) mit Aktionen ausführen.

Answer 2

Ich würde eine weitere Abstraktionsebene hinzu:

Sie sollten Ihre api Anrufe innerhalb von weiteren/anderen Dateien aufgeteilt und diese Methoden in Ihrem Shop Aktionen rufen

//store action 
import * as apiService from '../api' 

export const someAction = ({ commit }) => { 
apiService.getXXX() 
.then(result => { 
    commit(SOME_MUTATION, result) 
}) 
.catch(error => { 
    commit(SOME_ERROR_MUTATION, error) 
}) 
}