Contents
Vue Use State Effect
CAUTION: Built and tested for/with Vue 3 and/or Nuxt 3 (RC-2).
Fast and small library (composable), built on top of the native EffectScope Vue 3 API that will provide safe and sharable (across the app) state for your local composables and functions. It might be a good replacement / alternative for Vuex or Pinia state management, if you need smaller and less extensive solution.
Check out the Stackblitz Nuxt 3 demo here. 🚀
Motivation / Story
.
Check out below how to use it, provided examples and demos where you can see it in action. Any questions, problems, errors? Please
check out the Q&A section first, then if you still will be unhappy add a new Issue. Thanks and Enjoy!
Installation
Usage
for some wider perspective.
Configuration (API)
name
type: String | ‘state’
default: ‘state’
description: name of composable state object that you’ll be referring to inside your components, if not defined by default your state object will get state key, please note that it’s not read automatically and that’s because of application build mode functions name-spaces formatting
debug
type: Boolean
default: false
description: if set to true it will turn on the debug mode, you will be able to see the shared composable body / state
tip: you can turn it on for the development mode
destroy
type: Boolean | ‘custom’
default: false
description: if set to true composable state will be destroyed after component onBeforeUnmount hook, if set to custom it will be waiting for custom setup (described below) and destroyed onBeforeMount hook
Destroy Destination (Custom) ✨ from 0.1.2
You can decide where the state will be destroyed (re-initialized). You will achieve this by passing special property and corresponding label that will point place / component where it should be executed.
For this one you can pass inline options to the useStateEffect composable while invoking within the components.
export type UseStateEffectOptions<T = any> = {
readonly destroyLabels: string[]
readonly props: ExtractPropTypes<{ stateEffectDestroyLabel: string } | T>
}
Let’s say that SharedStateComponent.vue component is reused across the application, and you’re displaying here some shared data from the useSharedState composable. And it will always be updated and aligned with the state unless the passed property from the parent component will not meet the same custom label defined as a destroyLabels (you can use multiple) with your composable invocation. Like this.
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
<script setup lang="ts">
import { useSharedState } from ‘@composables/useSharedState’
const props = defineProps({
stateEffectDestroyLabel: { type: String, default: ‘Label’ },
})
const {
sharedState: { data },
} = useSharedState({ destroyLabels: [‘CustomLabel’], props })
</script>”>
<!– SharedStateComponent.vue –>
<script setup lang=“ts“>
import { useSharedState } from ‘@composables/useSharedState‘
const props = defineProps({
stateEffectDestroyLabel: { type: String, default: ‘Label‘ },
})
const {
sharedState: { data },
} = useSharedState({ destroyLabels: [‘CustomLabel‘], props })
</script>