Safe And Sharable State Mangement Library - Vue Use State Effect

Install & Download:

# Yarn
$ yarn add vue-use-state-effect
# NPM
$ npm i vue-use-state-effect

Description:

State management is a hard topic to get right at the best of times, imagine doing so at scale.

The Vue Use State Effect library provides an intuitive yet powerful way to safely manage the state at all levels of your application. Basic on the native Vue 3 effectScope() API.

Basic usage:

import { ref } from 'vue'
import { useStateEffect } from 'vue-use-state-effect'
const sharedState = () => {
  const state = ref({
    test: 'Initial state value.',
  })
  const updateState = () => {
    state.value = {
      test: 'Updated state value.',
    }
  }
  return {
    state,
    updateState,
  }
}
export const useSharedState = useStateEffect(sharedState, { name: 'sharedState', debug: true, destroy: false })

import { useFetch } from '#app';
import { ref } from 'vue';
import { useStateEffect } from 'vue-use-state-effect';
const sharedFetch = () => {
  const characters = ref<any>([]);
  const loading = ref<Boolean>(false);
  const getCharacters = async () => {
    loading.value = true;
    const { data, pending } = await useFetch(
      'https://rickandmortyapi.com/api/character/1,2,3,4,5'
    );
    loading.value = pending.value;
    characters.value = data.value;
  };
  return {
    loading,
    characters,
    getCharacters,
  };
};
export const useSharedFetch = useStateEffect(sharedFetch, {
  name: 'sharedFetch',
  debug: true,
  destroy: false,
});