useState · Nuxtコンポーザブル

使用方法

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))

詳細はドキュメント > はじめる > 状態管理をご覧ください。

useState内のデータはJSONにシリアライズされるため、クラス、関数、シンボルなど、シリアライズできないものは含まないでください。

useStateはコンパイラによって変換される予約済みの関数名であるため、独自の関数をuseStateと名付けることは避けてください。

Alexander Lichterによる、useStateを使用する理由と時期に関するビデオをご覧ください。

状態を深くリアクティブにする必要がない場合は、useStateとshallowRefを組み合わせて使用できます。状態に大きなオブジェクトと配列が含まれる場合、パフォーマンスを向上させることができます。

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>

key: リクエスト間でデータ取得が適切に重複排除されるようにする一意のキー。キーを指定しない場合、useStateのインスタンスのファイルと行番号に一意なキーが生成されます。
init: 初期化されていない場合の状態の初期値を提供する関数。この関数はRefを返すこともできます。
T: (TypeScriptのみ) 状態の型を指定します。

useServerSeoMeta

useServerSeoMetaコンポーザブルを使用すると、完全なTypeScriptサポートを使用して、サイトのSEOメタタグをフラットオブジェクトとして定義できます。

$fetch

Nuxtはofetchを使用して、HTTPリクエストを行うための$fetchヘルパーをグローバルに公開します。