{"id":14973729,"url":"https://github.com/idevelopthings/vue-class-stores","last_synced_at":"2025-10-27T02:31:23.417Z","repository":{"id":61495291,"uuid":"431330680","full_name":"iDevelopThings/vue-class-stores","owner":"iDevelopThings","description":"Powerful class based stores for vue 3","archived":false,"fork":false,"pushed_at":"2023-05-03T12:42:54.000Z","size":1028,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-07T21:36:35.598Z","etag":null,"topics":["state","state-management","vue","vue-state-manager","vue-store","vuejs","vuex","vuex-store"],"latest_commit_sha":null,"homepage":"https://vue-class-stores.idt.dev","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/iDevelopThings.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2021-11-24T03:10:46.000Z","updated_at":"2024-07-31T22:16:58.000Z","dependencies_parsed_at":"2024-09-14T17:06:53.592Z","dependency_job_id":"f71039f4-ce48-4b2a-a1f7-eec8d8e82096","html_url":"https://github.com/iDevelopThings/vue-class-stores","commit_stats":{"total_commits":82,"total_committers":1,"mean_commits":82.0,"dds":0.0,"last_synced_commit":"ffc6552e125fb9ee35b68b810083c010d88e4e7b"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-class-stores","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-class-stores/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-class-stores/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDevelopThings%2Fvue-class-stores/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iDevelopThings","download_url":"https://codeload.github.com/iDevelopThings/vue-class-stores/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238422923,"owners_count":19469657,"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":["state","state-management","vue","vue-state-manager","vue-store","vuejs","vuex","vuex-store"],"created_at":"2024-09-24T13:49:19.010Z","updated_at":"2025-10-27T02:31:23.032Z","avatar_url":"https://github.com/iDevelopThings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" dir=\"auto\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@idevelopthings/vue-class-stores\" rel=\"nofollow\"\u003e\n    \u003cimg align=\"center\" src=\"https://vue-class-stores.idt.dev/VueClassStoresLogo.png\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nA vite/vue package for elegant class based stores\n\u003c/p\u003e\n\n\u003cp align=\"center\" dir=\"auto\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@idevelopthings/vue-class-stores\" rel=\"nofollow\"\u003e\n    \u003cimg alt=\"npm (scoped)\" src=\"https://img.shields.io/npm/v/@idevelopthings/vue-class-stores?style=for-the-badge\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" dir=\"auto\"\u003e\n  \u003ca href=\"https://vue-class-stores.idt.dev\" rel=\"nofollow\"\u003e\n    Documentation\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Features\n\n- Fully reactive\n- Ability to be used globally, as small individual stores and used within other stores\n- Simple object orientated and regular javascript architecture for your stores(you just write a class, instead of separating everything into individual actions/getters/mutations)\n- Vue devtools plugin included, ability to inspect/edit your state and call your actions from it\n- Full type completion(I love TS and it's types/auto-completion), code is generated which integrates it into vues types and more!\n- It's beautiful to write code this way and separate all of your applications business logic into a store that it belongs too, I used this approach in vue 2 also, it kept many of my applications code tidy and follow-able\n\n## Basic Example:\n\nA store for an \"todo\" application\n\nThe store class:\n\n```typescript\nimport {Store} from \"@idevelopthings/vue-class-stores/vue\";\nimport axios from 'axios';\n\n// We defined loading/todos state here\ninterface ITodosStore {\n\tloading: boolean;\n\ttodos: ITodo[];\n}\n\n// The type of our todo object\nexport interface ITodo {\n\tuserId: number;\n\tid: number;\n\ttitle: string;\n\tcompleted: boolean;\n}\n\nclass TodosStore extends Store\u003cTodosStore, ITodosStore\u003e() {\n\tget state(): ITodosStore {\n\t\treturn {\n\t\t\tloading : false,\n\t\t\ttodos   : [],\n\t\t};\n\t}\n\n\tasync load() {\n\t\ttry {\n\t\t\tthis.$loading = true;\n\t\t\tthis.$todos   = (await axios.get\u003cITodo[]\u003e('https://jsonplaceholder.typicode.com/todos/1')).data;\n\t\t\t// We could also use this.state.todos = (await axios....)\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t} finally {\n\t\t\tthis.$loading = false;\n\t\t}\n\t}\n\n\tget isLoading(): boolean {\n\t\treturn this.$loading;\n\t}\n\n\tget todos(): ITodo[] {\n\t\treturn this.$todos;\n\t}\n}\n\nexport const todosStore = new TodosStore();\n```\n\nThe vue SFC:\n\n```vue\n\n\u003ctemplate\u003e\n\t\u003cdiv v-if=\"$todos.isLoading\"\u003e\u003cp\u003eLoading your todos!\u003c/p\u003e\u003c/div\u003e\n\t\u003cdiv v-else\u003e\n\t\t\u003cdiv v-for=\"todo in $todos.todos\"\u003e\n\t\t\t\u003cp\u003e{{ todo.title }}\u003c/p\u003e\n\t\t\t\u003cp\u003eIs complete? {{ todo.completed }}\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport {todosStore} from \"./Stores/TodoStore\";\n\ntodosStore.load();\n\u003c/script\u003e\n```\n\n# Vue Dev Tools Plugin\n\nThe package will automatically register the vue devtools plugin for you\nThis will allow you to inspect your state and trigger your, actions for testing purposes(although you cannot pass parameters yet :())\n\nYou can also edit your state from the plugin also :)\n\n![img.png](repository/devtools-plugin.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidevelopthings%2Fvue-class-stores","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidevelopthings%2Fvue-class-stores","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidevelopthings%2Fvue-class-stores/lists"}