ステート管理

Nuxt は、リアクティブで SSR フレンドリーな共有状態を作成するための強力な状態管理ライブラリと useState コンポーザブルを提供します。

Nuxt は、コンポーネント間でリアクティブで SSR フレンドリーな共有状態を作成するために、useState コンポーザブルを提供します。

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

useState の中のデータは JSON にシリアル化されるため、クラス、関数、シンボルなど、シリアル化できないものを含まないことが重要です。
useState コンポーザブルについて詳しくはこちらをご覧ください。

ベストプラクティス

<script setup> または setup() 関数の外で const state = ref() を定義しないでください。
例えば、export myState = ref({}) とすると、サーバー上でリクエスト間で状態が共有され、メモリリークにつながる可能性があります。
代わりに const useX = () => useState('x') を使用してください。

例

基本的な使い方

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

app/app.vue
<script setup lang="ts">
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>
Docs > 4 X > Examples > Features > State Management でライブサンプルを読み書きできます。
キャッシュされた状態をグローバルに無効化するには、clearNuxtState ユーティリティを参照してください。

状態の初期化

ほとんどの場合、非同期で解決されるデータで状態を初期化したいと考えるでしょう。これを行うには、app.vue コンポーネントと callOnce ユーティリティを使用できます。

app/app.vue
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>
これはnuxtServerInit アクションNuxt 2 のものと似ており、ページをレンダリングする前にストアの初期状態をサーバーサイドで埋めることができます。
詳細については、Docs > 4 X > API > Utils > Call Once を参照してください。

Pinia との使用法

この例では、Pinia モジュール を利用してグローバルストアを作成し、アプリケーション全体で使用します。

npx nuxt module add pinia で Pinia モジュールをインストールするか、モジュールのインストール手順.
export const useWebsiteStore = defineStore('websiteStore', {
  state: () => ({
    name: '',
    description: '',
  }),
  actions: {
    async fetch () {
      const infos = await $fetch('https://api.nuxt.com/modules/pinia')

      this.name = infos.name
      this.description = infos.description
    },
  },
})

高度な使用法

import type { Ref } from 'vue'

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

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (import.meta.server) {
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (import.meta.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)))
}
Docs > 4 X > Examples > Advanced > Locale でライブサンプルを読み書きできます。

共有状態

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

composables/states.ts
export const useColor = () => useState<string>('color', () => 'pink')
app/app.vue
<script setup lang="ts">
// ---cut-start---
const useColor = () => useState<string>('color', () => 'pink')
// ---cut-end---
const color = useColor() // Same as useState('color')
</script>

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

サードパーティライブラリの使用

Nuxt は、グローバルな状態管理を提供するために Vuex ライブラリに依存していました。Nuxt 2 から移行する場合は、移行ガイド を参照してください。

Nuxt は状態管理について意見がないため、ニーズに合ったソリューションを自由に選択してください。最も人気のある状態管理ライブラリと複数の統合があります。

  • Pinia - 公式の Vue 推奨
  • Harlem - 不変のグローバル状態管理
  • XState - 状態ロジックの可視化とテストのためのツールを備えたステートマシンアプローチ