https://github.com/letstri/vaxee
Vaxee is a simple and easy-to-use library for Vue 3 to manage the state of your application.
https://github.com/letstri/vaxee
pinia state-management store vue
Last synced: over 1 year ago
JSON representation
Vaxee is a simple and easy-to-use library for Vue 3 to manage the state of your application.
- Host: GitHub
- URL: https://github.com/letstri/vaxee
- Owner: letstri
- License: mit
- Created: 2024-06-17T17:25:20.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-21T21:46:05.000Z (over 1 year ago)
- Last Synced: 2025-03-31T04:07:18.087Z (over 1 year ago)
- Topics: pinia, state-management, store, vue
- Language: TypeScript
- Homepage: https://vaxee.letstri.dev
- Size: 1.35 MB
- Stars: 64
- Watchers: 1
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
The State Manager for Vue 3
Store your data across whole application
## Overview
Vaxee is a simple and easy-to-use library for Vue 3 to manage the state of your application.
- ✨ Simple and intuitive API.
- 💪 Incredible TypeScript support.
- 🤯 Includes a `request` function.
- 🫡 Improved DX with reactivity.
## Documentation
You can find the documentation and installation steps [on the website](https://vaxee.letstri.dev).
## Demo
Let's create a huge demo store with a user and auth logic.
```ts
import { createStore } from "vaxee";
import { fetchUser, signIn, parseJwt } from "~/user";
export const useUserStore = createStore(
"user",
({ state, getter, request }) => {
const tokens = state(
{
access: "",
refresh: "",
},
{
persist: "user.tokens",
}
);
const isAuthorized = getter(
() => tokens.value.access && tokens.value.refresh
);
const userId = getter(() => parseJwt(tokens.value.access).sub);
const signIn = async (email: string, password: string) => {
tokens.value = await signIn(email, password);
};
const user = request(() => fetchUser(userId.value));
return {
user,
isAuthorized,
};
}
);
```
Now, let's use this store in a component.
```vue
import { watch } from "vue";
import { useUserStore } from "../stores/user";
const {
isAuthorized,
user: { data: user, refresh: refreshUser },
} = useUserStore();
watch(isAuthorized, (isAuthorized) => {
if (isAuthorized) {
refreshUser();
}
});
Authorized: {{ isAuthorized }}
User: {{ user.firstName }} {{ user.lastName }}
```
## Author
© [letstri](https://letstri.dev), released under the [MIT](https://github.com/letstri/vaxee/blob/main/LICENSE) license.