😸

[和訳] Nuxt3 公式サイト~State Management

2023/01/29に公開

この記事について

この記事はNuxt3 公式サイト State Management を和訳したものになります(日本語が不自然になってしまっている箇所があるのはごめんなさい)。
https://nuxt.com/docs/getting-started/state-management

State Management

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

useState は SSR に適した ref の置き換えです。その値はサーバーサイドレンダリングの後(クライアント再度のハイドレーションの間)保存され、一意のキーを使って全てのコンポーネント間で共有されます。

詳細は下記ページを参照してください。
https://nuxt.com/docs/api/composables/use-state

Best Practice

代わりに const useX = () => useState('x') を使用してください。

Examples

Basic Usage

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

app.vue
<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>

下記ページで実際の例を見たり編集したりできます。
https://nuxt.com/docs/examples/composables/use-state

詳細は下記ページを参照してください。
https://nuxt.com/docs/api/composables/use-state

Advanced

この例では、HTTP リクエストヘッダからユーザのデフォルトロケールを見つけ、それをロケール状態に保持するコンポーザブルを使用します。

下記ページで実際の例を見たり編集したりできます。
https://nuxt.com/docs/examples/other/locale

Shared State

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

composables/states.ts
export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
app.vue
<script setup>
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>
GitHubで編集を提案

Discussion