「状態管理」の質問

[tokuda109]

https://github.com/vuejs-jp/learn.nuxt.com/blob/main/content/2.concepts/8.state-manegement/index.md で何か困ったことや質問があれば遠慮なく質問して下さい

[nanauda]

refとuseStateどちらかを使うかを判断するとき、

コンポーネント内でのみリアクティブな値を使いたい場合はref(reacive)を使っておく
→他のコンポーネントで使うことが決まったらuseStateに切り出す

というイメージでよいのでしょうか。

[aster-mnch]

@nanauda
ご質問ありがとうございます！
そして回答まで日が空いてしまい申し訳ありません 💦

ハンズオン当日の口頭解説の要点をまとめます。

コンポーネント内でのみリアクティブな値を使いたい場合はref(reacive)を使っておく
→他のコンポーネントで使うことが決まったらuseStateに切り出す

Nuxt における状態管理では基本的にその認識で大丈夫です 👌

少し補足すると、ref 関数でも以下の globalCount のように、グローバルな変数として初期化された値はコンポーネント間で値を共有することができます。
ただし、これはクロスリクエスト状態汚染という不具合を混入しやすいので、基本的に useState を使うことが推奨されます。
(実は useState も内部的に ref を使っており、この問題を解消する形で設計されています)

import { ref } from 'vue'

// モジュールスコープで生成されたグローバルな状態
const globalCount = ref(1)

export function useCount() {
  // コンポーネント毎に生成されたローカルな状態
  const localCount = ref(1)

  return {
    globalCount,
    localCount
  }
}

また、Vue.js, Nuxt の両方で状態管理をするための Pinia というライブラリもございます。
Pinia でも上記の問題を念頭に設計されていますので安全に使うことができます。

---

なお、こちらの Discussion はハンズオンの Q&A として使用しているため、新たな質問が来ないようにクローズしておりますが、質問対応自体は引き続き行っております。
なので、ご不明点ございましたら引き続きこちらにリプライしていただいても問題ありません 🙇