{"id":20609121,"url":"https://github.com/alexcode/vuex-rest-plugin","last_synced_at":"2026-04-18T22:03:06.073Z","repository":{"id":39554387,"uuid":"171697001","full_name":"alexcode/vuex-rest-plugin","owner":"alexcode","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T04:04:56.000Z","size":4678,"stargazers_count":3,"open_issues_count":18,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-17T03:14:34.031Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/alexcode.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":"2019-02-20T15:20:58.000Z","updated_at":"2022-03-14T18:21:52.000Z","dependencies_parsed_at":"2023-02-06T11:16:10.590Z","dependency_job_id":null,"html_url":"https://github.com/alexcode/vuex-rest-plugin","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcode%2Fvuex-rest-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcode%2Fvuex-rest-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcode%2Fvuex-rest-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcode%2Fvuex-rest-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexcode","download_url":"https://codeload.github.com/alexcode/vuex-rest-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242256662,"owners_count":20098016,"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":[],"created_at":"2024-11-16T10:12:46.745Z","updated_at":"2026-04-18T22:03:01.019Z","avatar_url":"https://github.com/alexcode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuex-rest-plugin\n\nThis plugin will create a store based on a model. A set of methods will populate your store as well as reference' stores.\n\n## Usage\n\n### Exemple `store.js` file\n\n```js\nimport Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport axios from \"axios\";\nimport { ApiStorePlugin, ApiState } from \"vuex-rest-plugin\";\n\nVue.use(Vuex);\nconst axiosInstance = axios.create();\n\nexport default new Vuex.Store({\n  plugins: [\n    ApiStorePlugin({\n      axios: axiosInstance,\n      name: \"my_custom_name\", //default is 'api'\n      dataPath: \"path_of_the_retured_payload\", //default undefined.\n      namespaced: true, // default true\n      models: {\n        resource: {\n          name: \"RESOURCE\",\n          plural: \"RESOURCES\",\n          type: new ApiState(),\n          references: {\n            user: \"user\",\n            vehicle: \"vehicle\"\n          }\n        },\n        user: {\n          name: \"USER\",\n          plural: \"USERS\",\n          type: new ApiState(),\n          references: {\n            role: \"role\"\n          }\n        },\n        vehicle: {\n          name: \"VEHICLE\",\n          plural: \"VEHICLES\",\n          type: new ApiState()\n        },\n        role: {\n          name: \"ROLE\",\n          plural: \"ROLES\",\n          type: new ApiState()\n        }\n      }\n    })\n  ]\n});\n```\n\n## Available vuex actions\n\nVuex-rest actions accept a payload in params.\n\n```ts\n{\n  id?: string;\n  type: string;\n  url?: string;\n  query?: string | object;\n  data?: IndexedObject | Array\u003cIndexedObject\u003e;\n}\n```\n\nThe payload will format the URL as `:type/:id?:query` or `:type?:query` depending of the action.\n\n`id` is the id of the object.\n\n`type` (Required) is type of model.\n\n`url` override of normal formating of the URI to `/:url?:query`.\n\n`query` can be a URL querystring as `my_param=1\u0026my_second_param=2` or an object `{ my_param: 1, my_second_param: 2 }`.\n\n`data` the payload to send with a `PATCH` or `POST` requests.\n\n### `get`\n\n```js\n// fetch array\nthis.$store.dispatch(\"api/get\", { type: \"resource\" });\n// will return a single element\nthis.$store.dispatch(\"api/get\", { type: \"resource\", id: \"my_id\" });\n```\n\n### `post`\n\n```js\nthis.$store.dispatch('api/post', { type: 'resource'  data: {...} });\nthis.$store.dispatch('api/post', { type: 'resource'  data: [{...}] });\n```\n\n### `patch`\n\n```js\nthis.$store.dispatch('api/patch', { id: 'my_id', type: 'resource'  data: {...} });\nthis.$store.dispatch('api/patch', { type: 'resource'  data: [{...}] });\n```\n\n### `delete`\n\n```js\nthis.$store.dispatch(\"api/delete\", { id: \"my_id\", type: \"resource\" });\n```\n\nAny of the above action can be queue and process/cancel at a later stage. Here are some helpers to help you with this.\n\n### `queueAction`\n\n```js\nthis.$store.dispatch(\"api/queueAction\", {\n  action: \"delete\",\n  type: \"resource\",\n  url: \"my/custom/path\",\n  data: data\n});\n```\n\n### `cancelAction`\n\n```js\nthis.$store.dispatch(\"api/cancelAction\", {\n  action: \"delete\",\n  type: \"resource\",\n  data: data\n});\n```\n\n### `processActionQueue`\n\n```js\nthis.$store.dispatch(\"api/processActionQueue\", [\"resource\"]);\nthis.$store.dispatch(\"api/processActionQueue\", [\"resource\", \"role\"]);\n```\n\n### `cancelActionQueue`\n\n```js\nthis.$store.dispatch(\"api/cancelActionQueue\", [\"resource\"]);\nthis.$store.dispatch(\"api/cancelActionQueue\", [\"resource\", \"role\"]);\n```\n\n### `queueActionWatcher` [DEPRECATED]\n\nIt can be called in a watcher to set the object to queue.\n\n```js\nthis.$store.dispatch(\"api/queueActionWatcher\", {\n  action: \"delete\",\n  type: \"resource\",\n  data: data\n});\n```\n\n### `add`\n\nAdd data in the store without fetching it from API. This is useful in cases like Websockets.\n\n```js\nthis.$store.dispatch('api/add', { type: 'resource'  data: {...} });\nthis.$store.dispatch('api/add', { type: 'resource'  data: [{...}] });\n```\n\nThe store can be emptied with the reset action.\n\n```js\nthis.$store.dispatch(\"api/reset\");\n```\n\n# Contribute\n\n## Project setup\n\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n\n```\nyarn run build\n```\n\n### Run your tests\n\n```\nyarn run test\n```\n\n### Lints and fixes files\n\n```\nyarn run lint\n```\n\n### Run your unit tests\n\n```\nyarn run test:unit\n```\n\n### Customize configuration\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcode%2Fvuex-rest-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexcode%2Fvuex-rest-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcode%2Fvuex-rest-plugin/lists"}