| URI | session-storage://{**name} |
|---|---|
| Path | Specify the key string for the value. If a slash (/) is included, the entire string will be used as the key. |
| Example | session-storage://basic/test |
ViewState
Primitive data
Specify the SessionStorage URI in the src attribute to share state across multiple components.
Ensure that the values are retained even after refreshing the browser.
vue
<template>
<ViewState
v-slot="example"
src="session-storage://example"
>
<b-input
:state-src="example"
/>
{{ example.data }}
</ViewState>
</template>
Object data
When using an object as a data value, please note that a null check for the data is necessary, and you need to use the Set method to update it.
vue
<template>
<ViewState
v-slot="example"
src="session-storage://example-object"
>
<b-input
:state-src="example"
state-path="key1"
/>
<b-input
:state-src="example"
state-path="key2"
/>
<JsonView :data="example.data" />
</ViewState>
<ViewState
v-slot="key1"
src="session-storage://example-object"
path="key1"
>
<b-input :state-src="key1" />
{{ key1.data }}
</ViewState>
</template>
Default data
If default values are needed, please register them as a new protocol in nuxt.config.ts.
"Default Value"
vue
<template>
<ViewState
v-slot="key1"
src="session-storage://example-default-object"
:data="{ key1: 'Default Value' }"
path="key1"
>
<b-input :state-src="key1" />
<JsonView :data="key1.data" />
</ViewState>
</template>