Nuxt useState

Nuxt の useState を利用した状態管理

項目

How it works

useState を利用した一時的な共有状態を取得・設定できます。

State URI

URI	state://{**name}
Scheme	state
Path	値のキー文字列を指定します。/を含めた場合も文字全体がキーにになります。
Example	state://basic/test

Example

Basic usage

StateSrc 属性に State URI を指定して、複数のコンポーネントで一つの状態を共有します

vue

<template>
  <c-input state-src="state://basic" />
  <c-label state-src="state://basic" />
</template>

State Path

StatePath 属性にプロパティを指定して、オブジェクトの値として状態を共有します。

vue

<template>
  <c-input state-src="state://pathsample" state-path="prop1" />
  <c-input state-src="state://pathsample" state-path="prop2" />
  <c-label state-src="state://pathsample" />
</template>

Action link

StateTo 属性に値を指定して、クリック時に状態を変更することができます。

[ Set Value ]

vue

<template>
  <c-input state-src="state://basic" />
  <c-label state-src="state://basic" />
  <div>
    <c-link
      state-src="state://basic"
      state-to="Set Value"
    >
      [ Set Value ]
    </c-link>
  </div>
</template>

Bootstrap