The State Manager for Vue 3
Store your data across whole application
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
queryfunction. - 🫡 Improved DX with reactivity.
You can find the documentation and installation steps on the website.
Let's create a huge demo store with a user and auth logic.
import { createStore } from "vaxee";
import { fetchUser, signIn, parseJwt } from "~/user";
export const useUserStore = createStore("user", ({ state, getter, query }) => {
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 = query(() => fetchUser(userId.value));
return {
user,
isAuthorized,
};
});Now, let's use this store in a component.
<script setup>
import { watch } from "vue";
import { useUserStore } from "../stores/user";
const {
isAuthorized,
user: { data: user, refresh: refreshUser },
} = useUserStore();
watch(isAuthorized, (isAuthorized) => {
if (isAuthorized) {
refreshUser();
}
});
</script>
<template>
<div>
<p>Authorized: {{ isAuthorized }}</p>
<p>User: {{ user.firstName }} {{ user.lastName }}</p>
</div>
</template>