{"id":26250710,"url":"https://github.com/sysvale/vuex-make-request-store","last_synced_at":"2025-10-23T16:38:18.660Z","repository":{"id":54815918,"uuid":"284321905","full_name":"Sysvale/vuex-make-request-store","owner":"Sysvale","description":"Utilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises","archived":false,"fork":false,"pushed_at":"2021-05-10T17:29:00.000Z","size":150,"stargazers_count":4,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T03:47:56.386Z","etag":null,"topics":["hacktoberfest","javascript","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sysvale.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-01T19:02:16.000Z","updated_at":"2021-05-10T17:26:56.000Z","dependencies_parsed_at":"2022-08-14T03:40:40.846Z","dependency_job_id":null,"html_url":"https://github.com/Sysvale/vuex-make-request-store","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sysvale%2Fvuex-make-request-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sysvale%2Fvuex-make-request-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sysvale%2Fvuex-make-request-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sysvale%2Fvuex-make-request-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sysvale","download_url":"https://codeload.github.com/Sysvale/vuex-make-request-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250560007,"owners_count":21450168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","vue","vuejs"],"created_at":"2025-03-13T16:36:35.086Z","updated_at":"2025-10-23T16:38:18.561Z","avatar_url":"https://github.com/Sysvale.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuex-make-request-store\nUtilitário vuex de gerenciamento do estado de requests HTTP baseado em Promises\n\n## Contribuindo\n### Instalação\n\nClone o repositório, vá ao diretório do projeto e em seguida execute `npm run install` em seu terminal.\n\n### Executando testes\n\nApós o passo de [Instalação](#instala%C3%A7%C3%A3o), em seu terminal, execute `npm run test`\n\n## Como utilizar\n\nRealize a instalação em seu projeto com `npm i @sysvale/vuex-make-request-store`\n\nAssumimos que você possui um conhecimento prévio em aplicações [Vue](https://vuejs.org/) e em [Vuex](https://vuex.vuejs.org/).\n\nAssumimos também que suas chamadas HTTP são realizadas através de alguma biblioteca que utiliza promises, como o [Axios](https://github.com/axios/axios) por exemplo.\n\nImagine que tenhamos um arquivo de um recurso Posts que expõe _services_ que fazem chamadas à API de Posts:\n\n`services/Posts.js`\n```javascript\nimport axios from 'axios';\n\nexport const getPosts = (params) =\u003e axios.get('/posts', { ...params });\n```\n\nO primeiro passo é criar um módulo que gerencie essa store desses recursos:\n\n`store/requests/posts`\n```javascript\nimport makeRequestStore from '@sysvale/vuex-make-request-store';\n\nimport {\n\tgetPosts,\n} from '\u003cpath\u003e/services/Posts';\n\nconst modules = [\n\t{ getPosts },\n];\n\nexport default {\n\tnamespaced: true,\n\n\tmodules: modules.reduce((acc, module) =\u003e ({\n\t\t...acc,\n\t\t...makeRequestStore(module),\n\t}), {}),\n};\n```\n\nDesse 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.\n\nFeito isso, vamos unificar as stores dos recursos:\n\n`store/requests`\n```javascript\nimport posts from './posts';\n\nexport default {\n\tnamespaced: true,\n\n\tmodules: {\n\t\tposts,\n\t},\n};\n```\n\nAssim, se houverem outras stores de outros recursos, por exemplo `comments`, é só importá-la e colocá-la nos módulos.\n\nPor fim, na store de sua aplicação, importe a store de requests:\n\n`store.js`\n```javascript\nimport Vue from 'vue';\nimport Vuex from 'vuex';\n\nimport requests from './requests';\n\nVue.use(Vuex);\n\nexport default new Vuex.Store({\n\tmodules: {\n\t\trequests,\n\t},\n});\n```\n\nEntão quando precisar utilizar esse service em um componente, por exemplo, é só chamar a mutation criada automaticamente pelo `makeRequestStore`. Observe:\n\n```javascript\n// \u003ctemplate\u003e\u003c/template\u003e\n// \u003cscript\u003e\nimport { mapState, mapActions } from 'vuex';\n\nexport default {\n\tcomputed: {\n\t\t...mapState('requests/posts', {\n\t\t\tloadingGetPosts: ({ getPosts }) =\u003e getPosts.isFetching,\n\t\t\tfailedGetPosts: ({ getPosts }) =\u003e getPosts.hasFailed,\n\t\t\tsucceededGetPosts: ({ getPosts }) =\u003e getPosts.hasSucceeded,\n\t\t}),\n\t},\n\n\tmethods: {\n\t\t...mapActions('requests/posts', [\n\t\t\t'getPosts',\n\t\t]),\n\t},\n};\n// \u003c/script\u003e\n```\n\nAo chamar `this.getPosts()` a promise do seu service é retornada e você pode encadear o `.then()` e o `.catch()` de acordo com sua lógica.\n\nObserve que é possível mapear os estados da requisição para utilizá-los caso seja necessário.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsysvale%2Fvuex-make-request-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsysvale%2Fvuex-make-request-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsysvale%2Fvuex-make-request-store/lists"}