Valdres

ValdresScope

Signature
<ValdresScope scope-id?: string :initialize?: Function>

valdres-vue Create an isolated child store for a Vue subtree

Creates a scoped store that inherits state from the parent but can override values independently. Components inside the scope read and write to the scoped store.

Usage

<script setup>
import { ValdresScope } from "valdres-vue"
</script>

<template>
  <ValdresScope scope-id="modal">
    <ModalContent />
  </ValdresScope>
</template>

Props

PropTypeDescription
scopeIdstringOptional identifier. Auto-generated if omitted.
initialize(txn) => void | [Atom, value][]Optional callback to set initial values.

Initializing state

<template>
  <ValdresScope scope-id="edit" :initialize="init">
    <EditForm />
  </ValdresScope>
</template>

<script setup>
import { ValdresScope } from "valdres-vue"
import { nameAtom, emailAtom } from "./store"

const init = (txn) => {
    txn.set(nameAtom, "Draft")
    txn.set(emailAtom, "")
}
</script>

Cleanup

The scope is automatically cleaned up when the component is destroyed.

See also