vuex 和ajax,vue.js - vuex ajax call and several components - Stack Overflow

This article describes a few patterns for implementing ajax calls and updating vuex state. Personally I agree with the author that method 3 of moving your ajax calls to the vuex store as actions because, as the article points out, it decouples state and presentation logic. This is also helpful because you can return a promise from your action to know when the state can be mutated

Code example from the article:

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: '

{{ message }}

',

methods: {

refreshMessage() {

this.$store.dispatch('refeshMessage').then(() => {

// do stuff

});

}

},

computed: {

message: { return this.$store.state.message; }

}

});

So as you can see here, ajax calls are encapsulated as vuex actions. In a component that relies on data from an ajax call, the component can perform the action (this.$store.dispatch('refreshMessage').then...) which will make the ajax call and update the data in the store. Since your component already has a reactive property that depends on data from the store, it will update automatically once the store has new data.