@renewx/vue3
v0.0.5
Published
Vue 3 bindings for RenewX
Downloads
3
Maintainers
Readme
@renewx/vue3
Installation
Install via npm:
npm i @renewx/vue3
Or via yarn:
yarn add @renewx/vue3
Usage
Store state
Subscribe to store changes and use reactive store state
⚠️ But remember that
useStore
returnsShallowRef<Freeze<T>>
⚠️ If you're utilizing dynamically created
store
oradapter
, it's important to passtrue
as the second parameter inuseStore
.This indicates that upon exiting the
scope
, not only will the change listener be cleared, butstore.off()
will also be invoked, ensuring proper cleanup.
<script setup lang="ts">
import { store } from "@renewx/core";
import { useStore } from "@renewx/vue3";
import { title } from "../stores/title";
import { user } from "../stores/user";
const Title = useStore(title);
const User = useStore(user);
const IsShow = useStore(store(false, "IS-SHOW"), { withOff: true });
</script>
<template>
<h1 v-text="Title" />
<button v-on:click="IsShow = !IsShow">Toggle me</button>
<span v-if="IsShow">{{ User.nickname }}</span>
</template>
In useStore
, you can pass a configuration object with the following parameters:
withOff: boolean
– whentrue
, the store is automatically removed upon component unmount in Vue 3.stateCheck: boolean
– whenfalse
, state change checks are disabled.
Docs
Read full docs here.