{"id":18873410,"url":"https://github.com/christianmalek/vuex-rest-api","last_synced_at":"2025-05-16T15:07:00.913Z","repository":{"id":48700612,"uuid":"85296224","full_name":"christianmalek/vuex-rest-api","owner":"christianmalek","description":"A utility to simplify the use of REST APIs with Vuex","archived":false,"fork":false,"pushed_at":"2024-01-29T16:44:20.000Z","size":496,"stargazers_count":379,"open_issues_count":1,"forks_count":48,"subscribers_count":20,"default_branch":"v2","last_synced_at":"2025-04-12T11:58:25.618Z","etag":null,"topics":["api","axios","hacktoberfest","helper","middleware","rest","utility","vue","vue2","vuex"],"latest_commit_sha":null,"homepage":"http://vuex-rest-api.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christianmalek.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-17T09:48:30.000Z","updated_at":"2025-03-27T12:37:46.000Z","dependencies_parsed_at":"2024-06-19T03:04:08.107Z","dependency_job_id":"1bfe8da8-722e-4acb-930e-4effe444a57e","html_url":"https://github.com/christianmalek/vuex-rest-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianmalek%2Fvuex-rest-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianmalek%2Fvuex-rest-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianmalek%2Fvuex-rest-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christianmalek%2Fvuex-rest-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christianmalek","download_url":"https://codeload.github.com/christianmalek/vuex-rest-api/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254391921,"owners_count":22063647,"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":["api","axios","hacktoberfest","helper","middleware","rest","utility","vue","vue2","vuex"],"created_at":"2024-11-08T05:34:48.967Z","updated_at":"2025-05-16T15:07:00.817Z","avatar_url":"https://github.com/christianmalek.png","language":"JavaScript","funding_links":[],"categories":["Utilities [🔝](#readme)","公用事业","Components \u0026 Libraries","Utilities"],"sub_categories":["国家管理","Utilities","State Management"],"readme":"# vuex-rest-api\n\n[![](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/vuejs/awesome-vue)\n[![](https://img.shields.io/badge/vuex-2.x-brightgreen.svg)](https://vuejs.org)\n[![npm](https://img.shields.io/npm/v/vuex-rest-api.svg)](https://www.npmjs.com/package/vuex-rest-api)\n[![npm](https://img.shields.io/npm/dm/vuex-rest-api.svg)](https://www.npmjs.com/package/vuex-rest-api)\n\nA Helper utility to simplify the usage of REST APIs with Vuex 2. Uses the popular HTTP client [axios](https://github.com/mzabriskie/axios) for requests. [Works](#usage-with-websanovavue-auth) with [websanova/vue-auth](https://github.com/websanova/vue-auth).\n\n## What is this good for\nIf you want to connect a REST API with Vuex you'll find that there are a few repetitive steps. You need to request the data from the api (with an action) and set the state (via a mutation). This utility (for the sake of brevity called `Vapi` in the README) helps in *creating the store* by setting up the state, mutations and actions with a easy to follow pattern.\n\n## It is **not** a middleware.\nIt's just a helper utility to help prepraring the store object for you. If there's something you don't like just overwrite the property.\n\n## Installation\n```bash\nnpm install vuex-rest-api\n```\n\n\u003e Some notes: This readme assumes that you're using at least ES2015.\n\n## Steps\n1. Import `vuex-rest-api` (I called it `Vapi`).\n1. Create a `Vapi` instance.  \n   At least you have to set the base URL of the API you're requesting from. You can also define the default state. If you don't define a default state from a property it will default to `null`.\n   In the example\n1. Create the actions.  \n   Each action represents a Vuex action. If it will be called (property `action`), it requests a specific API endpoint (property `path`) and sets the related property named `property` to the response's payload.\n1. Create the store object\n1. Pass it to Vuex. Continue reading [here](https://christianmalek.github.io/vuex-rest-api/miscellaneous.html#calling-the-actions) to know how to *call the actions*.\n\n```js\n// store.js\n\nimport Vuex from \"vuex\"\nimport Vue from \"vue\"\n// Step 1\nimport Vapi from \"vuex-rest-api\"\n\nVue.use(Vuex)\n\n// Step 2\nconst posts = new Vapi({\n  baseURL: \"https://jsonplaceholder.typicode.com\",\n    state: {\n      posts: []\n    }\n  })\n  // Step 3\n  .get({\n    action: \"getPost\",\n    property: \"post\",\n    path: ({ id }) =\u003e `/posts/${id}`\n  })\n  .get({\n    action: \"listPosts\",\n    property: \"posts\",\n    path: \"/posts\"\n  })\n  .post({\n    action: \"updatePost\",\n    property: \"post\",\n    path: ({ id }) =\u003e `/posts/${id}`\n  })\n  // Step 4\n  .getStore()\n\n// Step 5\nexport const store = new Vuex.Store(posts)\n```\n\n## Minimal example \nYep, here: https://codesandbox.io/s/8l0m8qk0q0\n\n## API and further documentation\nThe docs are now available under http://vuex-rest-api.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianmalek%2Fvuex-rest-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristianmalek%2Fvuex-rest-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristianmalek%2Fvuex-rest-api/lists"}