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

by Toru Eguchi

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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