Vueのstateを学ぶメモ

https://vuejs.org/guide/scaling-up/state-management.html

• global stateはComponentそれぞれでimportしても共通の値を持つ（シングルトン？）
• local stateはComponentそれぞれでimportすると別々の値になる

local stateは納得できるが（Composablesが同じような動作になる）、global stateは謎

• ComponentAが先にstate.jsをimportする→reactiveが実行される
• ComponentBがstate.jsをimportする→おそらく裏側にweakmapにstateが用意されているので、それを返しているんだと思うが、どうやって返しているのか謎

ChatGPTに聞いてみた

JavaScriptモジュール（ESモジュール）は、インポートされるとそのファイル全体が一度だけ評価（実行）されます。そしてその結果（エクスポートされるもの）はキャッシュされ、同じモジュールを再度インポートしても、新たに評価されることはありません。これにより、同じモジュールを複数の場所でインポートしても、すべての場所で同じエクスポート（同じオブジェクトや関数など）が得られます。

https://zenn.dev/highgrenade/scraps/495a3a8775353e

なるほど？

https://typescriptbook.jp/reference/import-export-require#モジュールはimport時に一度だけ評価される

vueにはさらにprovide/injectがある
https://ja.vuejs.org/guide/components/provide-inject.html

vueuseに結構State関連の関数（？）がある

https://vueuse.org/shared/createGlobalState/

https://vueuse.org/shared/createSharedComposable/

https://vueuse.org/core/useAsyncState/

https://vueuse.org/core/useSessionStorage/

https://vueuse.org/core/useLocalStorage/

effectScopeでハマるなどしている

https://twitter.com/ushiro_noko/status/1424976134450470915

Componentの外でリアクティブを使いたいとはどういう用途だ