https://github.com/idevelopthings/vue-class-stores
Powerful class based stores for vue 3
https://github.com/idevelopthings/vue-class-stores
state state-management vue vue-state-manager vue-store vuejs vuex vuex-store
Last synced: 3 months ago
JSON representation
Powerful class based stores for vue 3
- Host: GitHub
- URL: https://github.com/idevelopthings/vue-class-stores
- Owner: iDevelopThings
- Created: 2021-11-24T03:10:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-03T12:42:54.000Z (about 2 years ago)
- Last Synced: 2025-02-07T21:36:35.598Z (3 months ago)
- Topics: state, state-management, vue, vue-state-manager, vue-store, vuejs, vuex, vuex-store
- Language: TypeScript
- Homepage: https://vue-class-stores.idt.dev
- Size: 1000 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
A vite/vue package for elegant class based stores
# Features
- Fully reactive
- Ability to be used globally, as small individual stores and used within other stores
- Simple object orientated and regular javascript architecture for your stores(you just write a class, instead of separating everything into individual actions/getters/mutations)
- Vue devtools plugin included, ability to inspect/edit your state and call your actions from it
- Full type completion(I love TS and it's types/auto-completion), code is generated which integrates it into vues types and more!
- 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
## Basic Example:
A store for an "todo" application
The store class:
```typescript
import {Store} from "@idevelopthings/vue-class-stores/vue";
import axios from 'axios';
// We defined loading/todos state here
interface ITodosStore {
loading: boolean;
todos: ITodo[];
}
// The type of our todo object
export interface ITodo {
userId: number;
id: number;
title: string;
completed: boolean;
}
class TodosStore extends Store() {
get state(): ITodosStore {
return {
loading : false,
todos : [],
};
}
async load() {
try {
this.$loading = true;
this.$todos = (await axios.get('https://jsonplaceholder.typicode.com/todos/1')).data;
// We could also use this.state.todos = (await axios....)
} catch (error) {
console.error(error);
} finally {
this.$loading = false;
}
}
get isLoading(): boolean {
return this.$loading;
}
get todos(): ITodo[] {
return this.$todos;
}
}
export const todosStore = new TodosStore();
```
The vue SFC:
```vue
Loading your todos!
{{ todo.title }}
Is complete? {{ todo.completed }}
import {todosStore} from "./Stores/TodoStore";
todosStore.load();
```
# Vue Dev Tools Plugin
The package will automatically register the vue devtools plugin for you
This will allow you to inspect your state and trigger your, actions for testing purposes(although you cannot pass parameters yet :())
You can also edit your state from the plugin also :)
