vuex-make-request-store

Utilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises

Contribuindo

Instalação

Clone o repositório, vá ao diretório do projeto e em seguida execute npm run install em seu terminal.

Executando testes

Após o passo de Instalação, em seu terminal, execute npm run test

Como utilizar

Realize a instalação em seu projeto com npm i @sysvale/vuex-make-request-store

Assumimos que você possui um conhecimento prévio em aplicações Vue e em Vuex.

Assumimos também que suas chamadas HTTP são realizadas através de alguma biblioteca que utiliza promises, como o Axios por exemplo.

Imagine que tenhamos um arquivo de um recurso Posts que expõe services que fazem chamadas à API de Posts:

services/Posts.js

import axios from 'axios';

export const getPosts = (params) => axios.get('/posts', { ...params });

O primeiro passo é criar um módulo que gerencie essa store desses recursos:

store/requests/posts

import makeRequestStore from 'vuex-make-request-store';

import {
	getPosts,
} from '<path>/services/Posts';

const modules = [
	{ getPosts },
];

export default {
	namespaced: true,

	modules: modules.reduce((acc, module) => ({
		...acc,
		...makeRequestStore(module),
	}), {}),
};

Desse modo, caso hajam outros endpoints da API de posts, basta apenas adicioná-los ao services/Posts.js, então importá-los no store/requests/posts.js e inserí-los no array de módulos.

Feito isso, vamos unificar as stores dos recursos:

store/requests

import posts from './posts';

export default {
	namespaced: true,

	modules: {
		posts,
	},
};

Assim, se houverem outras stores de outros recursos, por exemplo comments, é só importá-la e colocá-la nos módulos.

Por fim, na store de sua aplicação, importe a store de requests:

store.js

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

import requests from './requests';

Vue.use(Vuex);

export default new Vuex.Store({
	modules: {
		requests,
	},
});

Então quando precisar utilizar esse service em um componente, por exemplo, é só chamar a mutation criada automaticamente pelo makeRequestStore. Observe:

// <template></template>
// <script>
import { mapState, mapActions } from 'vuex';

export default {
	computed: {
		...mapState('requests/posts', {
			loadingGetPosts: ({ getPosts }) => getPosts.isFetching,
			failedGetPosts: ({ getPosts }) => getPosts.hasFailed,
			succeededGetPosts: ({ getPosts }) => getPosts.hasSucceeded,
		}),
	},

	methods: {
		...mapActions('requests/posts', [
			'getPosts',
		]),
	},
};
// </script>

Ao chamar this.getPosts() 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 os estados da requisição para utilizá-los caso seja necessário.