feat: content/2.concepts/6.state-manegement (#37)

Author: ubugeeei

content/2.concepts/6.state-manegement/.template/files/app.vue

@@ -0,0 +1,4 @@
+<template>
+  <CounterA />
+  <CounterB />
+</template>

content/2.concepts/6.state-manegement/.template/files/components/CounterA.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = useState('count', () => 0)
+</script>
+
+<template>
+  <div>
+    <h2>Counter A</h2>
+    <p>Count: {{ count }}</p>
+    <button type="button" @click="count++">
+      Increment
+    </button>
+  </div>
+</template>

content/2.concepts/6.state-manegement/.template/files/components/CounterB.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const count = useState('count', () => 0)
+</script>
+
+<template>
+  <div>
+    <h2>Counter B</h2>
+    <p>Count: {{ count }}</p>
+    <button type="button" @click="count++">
+      Increment
+    </button>
+  </div>
+</template>

content/2.concepts/6.state-manegement/.template/index.ts

@@ -0,0 +1,8 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    fileTree: true,
+  },
+}

content/2.concepts/6.state-manegement/index.md

@@ -2,10 +2,31 @@
 ogImage: true
 ---
 
-# State Management
+# 状態管理
 
-<!-- TODO:
-  - What is State Management?
-    - Problems on SSR
-  - How to implement State Management in a Nuxt.js app (useState)
--->
+Vue.js での 状態管理 (State Management) とは、アプリケーションでリアクティブな状態 (ステート) を管理することを言います。\
+[Vue.js 公式ドキュメント 状態管理](https://ja.vuejs.org/guide/scaling-up/state-management)
+
+複数のコンポーネント間で状態を共有する際、Vue.js ではリアクティビティー API を用いたシンプルな状態管理を行うことができます。\
+[Vue.js 公式ドキュメント リアクティビティー API によるシンプルな状態の管理](https://ja.vuejs.org/guide/scaling-up/state-management#simple-state-management-with-reactivity-api)
+
+しかし、[SSR の考慮](https://ja.vuejs.org/guide/scaling-up/state-management#ssr-considerations) にも書かれているように、Nuxt で SSR を行っている場合には [いくつかの問題](https://ja.vuejs.org/guide/scaling-up/ssr#cross-request-state-pollution) が起こる可能性があります。
+
+Vue.js の公式ドキュメントでは [Pinia](https://pinia.vuejs.org/) と言う状態管理ライブラリを使う方法が紹介されていますが、Nuxt が提供する `useState()` コンポーザブル もその解決策の一つです。\
+(もちろん、[Nuxt で Pinia を使用する](https://nuxt.com/docs/getting-started/state-management#usage-with-pinia) ことも可能です。)
+
+## useState()
+
+[useState() コンポーザブル](https://nuxt.com/docs/api/composables/use-state) は SSR フレンドリーな状態管理と、コンポーネント間で状態を共有するためのシンプルな方法を提供します。\
+`useState()` は共有状態を定義するための SSR フレンドリーな `ref()` です。\
+前述の通り、Vue.js のリアクティビティー API (e.g. `ref()`) を用いてコンポーネントを跨いだ状態管理を SSR で行う場合、いくつかの問題が発生する可能性があります。\
+そのため、Nuxt では `<script setup>` や `setup()` 関数の **外** では、`ref()` での状態を定義せず、代わりに `useState()` を使用することがベストプラクティスとされています。
+
+このプレイグラウンドの例では、`"count"` をキーに `CounterA` コンポーネントと `CounterB` コンポーネントで状態を共有しています。\
+`CounterA` によってレンダリングされたボタンをクリックしたときに、`CounterB` のステートも更新されることに注目してみてください。
+
+より詳細な説明は、[Nuxt 公式ドキュメント 状態管理](https://nuxt.com/docs/getting-started/state-management) を参照してください。
+
+:::note
+`useState()` のデータは JSON にシリアライズされるため、クラス、関数、シンボルなど、シリアライズできないものを含まないことに注意が必要です。
+:::