search

tuqulore / vue-3-practices

Vue 3 / Nuxt 3 の教材集
https://tuqulore.github.io/vue-3-practices/
MIT License
14 stars 8 forks source link

useState() の効用（なにがうれしいか＆Composition APIよりなにがいいか）の説明 #617

Open knokmki612 opened 1 week ago

knokmki612 commented 1 week ago

付箋アプリで使っているが、Nuxtの説明としてあると親切

Hidetaro7 commented 1 week ago

「状態管理を行うにはuseStateじゃなくてはならない」というこだわりはないらしいので、ニーズに合わせて選定することも大切とのこと。 https://nuxt.com/docs/getting-started/state-management#using-third-party-libraries

Hidetaro7 commented 1 week ago

useState関数は、一意のキーを使用してすべてのコンポーネント間で共有される状態管理のコンポーザブル関数であり、コンポーネント同士でpropsやemitによるデータのバケツリレーをせずともグローバルに直接データを扱える。

コンポーザブルとは状態を持つロジックをカプセル化して再利用することができることを指し、 再利用はどこのコンポーネント（Vueファイル）からでもアクセスが可能になる。

Composition APIが提供されるようになって、リアクティブな値をコンポーネントから切り離して管理するComposable Function が使えるようになった。これはjsもしくはtsファイルとしてcomposablesディレクトリ配下に格納することが一般的である。 利点は、どこからでも簡単にアクセスがゆえ自由にデータの変更ができるようになってしまうため、readonlyメソッドでデータ自体は保護したり、ミューテーションできる関数を提供するなどの機能を提供でき、それをコンポーネントから利用することができることで、安全かつ効率的に管理された状態を扱えることにある。

Hidetaro7 commented 1 week ago

という説明に触れたうえで、counterのサンプルコードでも見せたほうがよさそう。 ただ、Nuxt環境でuseStateを使うので、 Vue Playgroundではないほうでデモを見せるなどで理解を深めてもらいたい。

Hidetaro7 commented 1 week ago

最低限と思えるコードを書いてみた。 https://stackblitz.com/edit/nuxt-starter-rnflks?file=composables%2Fcounter.js

Hidetaro7 commented 2 days ago

そもそも nuxtのハンズオンの流れで composables について触れているので、ここで説明を増やすで良い気がする https://github.com/tuqulore/vue-3-practices/blob/4db6309dab91ec6eee358f365adca35a54410fae/docs/slides.md#L1819-L1820

Hidetaro7 commented 21 hours ago

ref()でいいんじゃないの？

コンポネント外のグローバルな領域でrefを使うと、グローバルな状態として扱えなく、個別のデータとしてしか扱えないことを確認した。

const count = ref(3); の場合

Image

const count = useState("counter", () => 3); の場合 Image