Safe And Sharable State Mangement Library – Vue Use State Effect

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,
});

Preview:

Safe And Sharable State Mangement Library - Vue Use State Effect

Changelog:

v0.1.2 (06/09/2022)

  • added destroy destination
  • bugfix

Download Details:

Author: lukasborawski

Live Demo: https://stackblitz.com/edit/vue-use-state-effect-demo

Download Link: https://github.com/lukasborawski/vue-use-state-effect/archive/refs/heads/develop.zip

Official Website: https://github.com/lukasborawski/vue-use-state-effect

Install & Download:

# Yarn
$ yarn add vue-use-state-effect

# NPM
$ npm i vue-use-state-effect

Add Comment