vaxee

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.

Demo

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, 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.

<script setup>
import { watch } from "vue";
import { useUserStore } from "../stores/user";

const { isAuthorized } = useUserStore();
const { data: user, refresh: refreshUser } = await useUserStore("user");

watch(isAuthorized, (isAuthorized) => {
  if (isAuthorized) {
    refreshUser();
  }
});
</script>

<template>
  <div>
    <p>Authorized: {{ isAuthorized }}</p>
    <p>User: {{ user.firstName }} {{ user.lastName }}</p>
  </div>
</template>

Author

© letstri, released under the MIT license.