状態管理 / State Management

Nuxtは、コンポーネント間で共有される反応性のある状態を作成するためのuseStateコンポーザブルを提供しています。

useStateは、SSRに対応したrefの代替となるものです。 その値は、サーバーサイドレンダリング後（クライアントサイドのハイドレーション中）に保持され、一意のキーを使用してすべてのコンポーネント間で共有されます。

Info 詳細は「Docs > API > Composables > Use State」を参照してください。

useStateの書式

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

• key:データフェッチングが正しく重複排除されることを保証する一意のキーです。キーを指定しない場合、useStateのインスタンスのファイルと行番号に固有のキーが自動的に生成されます。
• init:初期化されていない場合に状態の初期値を提供する関数です。この関数は Ref を返すこともできます。
• T:(TypeScriptのみ) 状態の型を指定します。

ベストプラクティス

• ページ構造の適切な設計: Nuxtでは、pagesディレクトリ内のVueファイルがURLとしてマッピングされます。適切なディレクトリ構造とファイル命名規則を使用して、ページを効果的に管理します。
• モジュールの使用: Nuxtは機能を拡張するための多くのモジュールを提供しています。必要な機能を実装するために適切なモジュールを選択し、活用しましょう。
• データのフェッチング: ページコンポーネント内でのデータフェッチングは、useFetchやuseAsyncDataなどのNuxtのコンポーザブルを活用して行います。データのフェッチングを適切に管理し、パフォーマンスとキャッシュを最適化しましょう。
• SEOの最適化: ページのメタ情報やHTML構造を適切に設定して、SEOを最適化しましょう。Nuxtの機能を活用して、メタタグやページ構造を簡単にカスタマイズできます。
• ページトランジションの使用: ページ間のトランジションを活用して、ユーザーエクスペリエンスを向上させましょう。Nuxtのトランジション機能を使用するか、カスタムのJavaScriptトランジションを作成することができます。
• セキュリティ対策: Nuxtはセキュリティに重要な機能を提供しています。適切なセキュリティ対策を実装し、脆弱性や攻撃に対してアプリケーションを保護しましょう。
• デプロイの最適化: Nuxtはさまざまなデプロイプラットフォームとの互換性があります。適切なデプロイ設定を行い、アプリケーションのパフォーマンスとスケーラビリティを最適化しましょう。

これらのベストプラクティスに従うことで、Nuxtをより効果的に使用し、堅牢で高パフォーマンスなアプリケーションを構築することができます。

事例

基本的な使用方法 / Basic Usage

この例では、コンポーネント内でカウンターの状態を管理します。 useState('counter')を使用する他のコンポーネントでも、同じリアクティブな状態を共有します。

<script setup>
  const counter = useState("counter", () => Math.round(Math.random() * 1000));
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
  </div>
</template>

Info 詳細は「Docs > Examples > Features > State Management」を参照してください。

Info 詳細は「Docs > API > Composables > Use State」を参照してください。

高度な使用方法 / Advanced Usage

この例では、HTTPリクエストヘッダーからユーザーのデフォルトのロケール（年月日）を検出し、ロケールの状態を保持するコンポーザブルを使用しています。

import type { Ref } from 'vue'

export const useLocale = () => useState<string>('locale', () => useDefaultLocale().value)

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (process.server) {    
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (process.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

export const useLocales = () => {
  const locale = useLocale()
  const locales = ref([
    'en-US',
    'en-GB',
    ...
    'ja-JP-u-ca-japanese'
  ])
  if (!locales.value.includes(locale.value)) {
    locales.value.unshift(locale.value)
  }
  return locales
}

export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
  return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
}

<script setup>
  const locales = useLocales()
  const locale = useLocale()
  const date = useLocaleDate(new Date('2016-10-26'))
</script>

<template>
  <div>
    <h1>Nuxt birthday</h1>
    <p>{{ date }}</p>    
    <label for="locale-chooser">Preview a different locale</label>
    <select id="locale-chooser" v-model="locale">
      <option v-for="locale of locales" :key="locale" :value="locale">
        {{ locale }}
      </option>
    </select>
  </div>
</template>

Info 詳細は「Docs > Examples > Advanced > Locale」を参照してください。

共有状態 / Shared State

自動インポートされるコンポーザブルを使用することで、グローバルな型安全な状態を定義し、それらをアプリケーション全体でインポートすることができます。

export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')

<script setup>
  const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

サードパーティープラグインの使用について / Using third-party libraries

Nuxtは以前、グローバルな状態管理のためにVuexライブラリを使用していました。Nuxt2から移行する場合は、移行ガイドを参照してください。

Nuxtは状態管理のライブラリが初期状態ではインストールされていないため、必要に応じて適切なソリューションを選択してください。 最も人気のある状態管理ライブラリとの複数の統合が用意されています。

• Pinia - VuexはNuxtのデフォルトの状態管理ライブラリでしたが、Nuxt3からはオプションとなりました。
• Harlem - イミュータブル (英: immutable) なグローバルオブジェクトを状態管理プラグイン
• XState - ビジュアライズや状態ロジックのテストに便利なツールを備えたプラグイン