Session Storage

ブラウザのSession Storageを利用して共有状態を取得・設定、保管できます。

URI session-storage://{**name}
Path

値のキー文字列を指定します。/を含めた場合も文字全体がキーにになります。

Example session-storage://basic/test

ViewState

Primitive data

Src 属性に SessionStorage URI を指定して、複数のコンポーネントで状態を共有します。

ブラウザの更新でも値が保持されることを確認してください。

vue
<template>
 <ViewState
  v-slot="example"
  src="session-storage://example"
 >
  <b-input
   :state-src="example"
  />
  {{ example.data }}
 </ViewState>
</template>

Object data

data値としてObjectを利用する場合には、DataのNullチェックが必要であることと、Setメソッドを利用して更新する必要があることに注意してください。
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

デフォルト値が必要な場合は、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>