🦔

Nuxt3 では「useState」を使わないと状態共有できない(当たり前)

2024/08/17に公開

当たり前のことですが検証した結果そうでした

ずっと試そうと思ってた

注意

他に永続化の方法がないという意味ではありません。

やったこと、何で試したか

Nuxt3では状態共有(保存という意味ではない、Vuexのような役割)するために「useState」という機能があります。また、このuseStateはComposablesディレクトリで定義して呼び出すのが一般的に思われます。
一方、このComposableは各ページ、コンポーネント間で共用の機能を抽出する役割を担うこと主です。
そこで考えたのは、Composableでは様々なコンポーネントからアクセスできるのだから一時的に共有のリソースとして値が保存されており、「useState」を使わなくても値が残されているのではないか?ということです。改めて考えると当然そんなはずはないのですが、そこはご愛敬。

さて、結果としては当然そういうことはありませんでした。「useState」を使わず宣言した変数はリアクティブにしようとしまいとページが移ったら値は初期化されました。恐らくページ遷移しなくてもコンポーネントが異なれば同じ変数にはアクセスできないと思います。
つまり、Composable、use〇〇は基本的にインスタンスを作成して使用するような方法で使用されており、よく共有したい値が登場する為、共有の為の「useState」とセットに考えられるということでしょう。

ところで、例えば「useRoute」から得られる「route」などですが、こいつらが「.value」を使用せずにアクセスできるけれどリアクティブに見えるのはなぜなのでしょうか。
ref、computedやtoRefを使えば「.value」が必要なはずですが
当然reactive()を使えばいらないのだけれどそうすべき意味はなにかあるのだろうか。

今回はまあ、戯言でした。
ドキュメントを読めよ、とか思われるかもしれませんが、まあ、ドキュメントがわかりにくいので手探りの方が早いまである。

Discussion