Utilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises
Em sua store, crie um novo arquivo, importe o service que realiza sua request e passe como parâmetro para a função makeRequestStore como um objeto. Veja o exemplo a seguir:
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import requests from './requests';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
requests,
},
});
requests.js
import meuService from './meuService';
export default {
namespaced: true,
modules: {
meuService,
},
};
meuService.js
import makeRequestStore from 'vuex-make-request-store';
import {
meuService,
} from '<path>/meuService';
const modules = [
{ meuService },
];
export default {
namespaced: true,
modules: modules.reduce((acc, module) => ({
...acc,
...makeRequestStore(module),
}), {}),
};
Então quando precisar utilizar esse service em um componente, por exemplo, é só chamar a mutation criada. Observe:
// <template></template>
// <script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState('requests/meuService', {
loadingMeuService: ({ meuService }) => meuService.isFetching,
failedMeuService: ({ meuService }) => meuService.hasFailed,
succeededMeuService: ({ meuService }) => meuService.hasSucceeded,
}),
},
methods: {
...mapActions('requests/meuService', [
'meuService',
]),
},
};
// </script>
Ao chamar this.meuService()
a promise do seu service é retornada e você pode encadear o .then()
e o .catch()
de acordo com sua lógica.
Observe que é possível mapear o estado da requisição para utilizá-los caso seja necessário.