Vue 3.0 Composition API を利用した Store と Composables の違い

Vue 3.0 Composition API を利用した Store と Composables の違い江口　徹（@egurinko）
Vue.js for 2020

• 大学 VR × 高齢者で研究 • 新卒で某通信会社インフラ担当 • Code
Chrysalis という BootCamp を3ヶ月 • 某通信会社復帰 SIer としてフロント開発 • ギフティ入社半年 @egurinko (江口徹)

お話しすること 01 02 03 04 Vue3.0 の疑問 Composition API の紹介
疑問解決へのきっかけまとめ

巷では、 • Composition API で状態管理が出来るようになる？疑問の始まり

疑問の始まり LinusBorg 氏の demo を見ると、同じ Composition API を利用した composables
と store が存在する

どうやら、Composition API には、２つの使い方があるこの違いは一体なんなんだろう？

ということで、試して、探ってみた https://what-is-todays-dinner.herokuapp.com

https://what-is-todays-dinner.herokuapp.com ある特定の機能の Composition API の紹介

https://what-is-todays-dinner.herokuapp.com ある特定の機能の • 状態 Composition API の紹介

https://what-is-todays-dinner.herokuapp.com ある特定の機能の • 状態 • 振る舞いをモジュール化させるためのAPI Composition API
の紹介

https://what-is-todays-dinner.herokuapp.com Composition API を利用する側インポートして、関数を呼び出すだけ各所で使い回せば Store になる！

https://what-is-todays-dinner.herokuapp.com ますます、 Composables と Store の違いがわからなくなっていた

ローダの機能をモジュール化した useLoader の composition function を実装したしかし、あるコンポーネントで Loader の State
を変更しても、 Loader が回らない https://what-is-todays-dinner.herokuapp.com 違いに気づいたきっかけ

- App.vue - Recipes.vue - Loader.vue https://what-is-todays-dinner.herokuapp.com 原因コンポーネントツリー useLoader()
で state の変更 useLoader() で state を参照

- App.vue - Recipes.vue - Loader.vue https://what-is-todays-dinner.herokuapp.com 原因コンポーネントツリー useLoader()
で state の変更 useLoader() で state を参照それぞれのスコープがグローバルではなかった・・・

https://what-is-todays-dinner.herokuapp.com 単純に作成した composition function のスコープは、グローバルではない

https://what-is-todays-dinner.herokuapp.com 良く確認したら、 Linus さんの demo では、 Store として利用したい項目は provide でグローバルスコープへ
inject を利用して各コンポーネントで利用するようになっていた store/ 配下

https://what-is-todays-dinner.herokuapp.com つまり、composables と store の境界とはグローバルで参照するべきものは、 composition api と provide/inject
を利用して store へ、グローバルで必要のない状態や振る舞いは、 composables へ

https://what-is-todays-dinner.herokuapp.com 考えてみたら、 Store はグローバルで状態を管理したいって当たり前だよね

https://what-is-todays-dinner.herokuapp.com

Vue 3.0 Composition API を利用した Store と Composabl...

Vue 3.0 Composition API を利用した Store と Composables の違い

Toru Eguchi

More Decks by Toru Eguchi

Other Decks in Technology

Featured

Transcript