状態管理
Nuxtは、強力な状態管理ライブラリと`useState`コンポーザブルを提供し、リアクティブでSSRフレンドリーな共有状態を作成します。
Nuxtは、コンポーネント間でリアクティブでSSRフレンドリーな共有状態を作成するためのuseStateコンポーザブルを提供します。
useState は、SSRフレンドリーな ref の代替です。その値は、サーバーサイドレンダリング後（クライアントサイドのハイドレーション中）に保持され、一意のキーを使用してすべてのコンポーネントで共有されます。
useState 内のデータはJSONにシリアライズされるため、クラス、関数、シンボルなど、シリアライズできないものを含まないことが重要です。ベストプラクティス
<script setup> または setup() 関数の外部で const state = ref() を定義しないでください。たとえば、
export myState = ref({}) を実行すると、サーバー上のリクエスト間で状態が共有され、メモリリークが発生する可能性があります。代わりに
const useX = () => useState('x') を使用してください。サンプル
基本的な使い方
この例では、コンポーネントローカルのカウンター状態を使用します。 useState('counter') を使用する他のコンポーネントはすべて、同じリアクティブ状態を共有します。
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>
ドキュメント > サンプル > 機能 > 状態管理でライブサンプルを読んで編集してください。
キャッシュされた状態をグローバルに無効にするには、
clearNuxtState ユーティリティを参照してください。状態の初期化
多くの場合、非同期的に解決されるデータで状態を初期化したいと思うでしょう。 app.vue コンポーネントと callOnce ユーティリティを使用してこれを行うことができます。
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>
これはNuxt 2の
nuxtServerInit アクションに似ており、ページをレンダリングする前にサーバーサイドでストアの初期状態を入力することができます。Piniaとの併用
この例では、Piniaモジュールを活用してグローバルストアを作成し、アプリ全体で使用します。
npx nuxi@latest 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)))
}
ドキュメント > サンプル > 高度な使い方 > Localeでライブサンプルを読んで編集してください。
共有状態
自動インポートされるコンポーザブルを使用することで、グローバルな型安全な状態を定義し、アプリ全体でインポートできます。
composables/states.ts
export const useColor = () => useState<string>('color', () => 'pink')
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は状態管理について意見を押し付けませんので、ニーズに合ったソリューションを自由に選択してください。以下を含む、最も一般的な状態管理ライブラリとの複数の統合があります。