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

651dbae5f19db82c6b89191a6c9dcd47?s=47 Toru Eguchi
December 11, 2019
Technology
3
1k

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

651dbae5f19db82c6b89191a6c9dcd47?s=128

Toru Eguchi

December 11, 2019
Tweet

More Decks by Toru Eguchi

See All by Toru Eguchi
651dbae5f19db82c6b89191a6c9dcd47?s=48 egurinko
3
550
651dbae5f19db82c6b89191a6c9dcd47?s=48 egurinko
1
510
651dbae5f19db82c6b89191a6c9dcd47?s=48 egurinko
0
3

Other Decks in Technology

See All in Technology
7a37d60769f6f3004adee19a8ff2c219?s=48 tunepolo
4
1.4k
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
130
44b799f91cc48e38c5fe9f5d9c5ecc61?s=48 takaichi00
28
11k
881b1b57f1cbe3b66b017203f7cb2efb?s=48 nplusone
0
170
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
2k
48a351a06897d7cc9721e2ddb7198e8a?s=48 dougpuob
0
110
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
140
Eea9a05e6e222a3d50c73f54a49fadf4?s=48 rtechkouhou
0
520
664b6e8ebe272fcfa5dbd6070eaf3cd4?s=48 wadayusuke
2
600
6eecc52120fba9d87d982684211182ec?s=48 mochico
0
170
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
2.8k
A38e9ebe0e62fd6753f555c005ea6551?s=48 tarukosu
0
660

Featured

See All Featured
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.7k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
606
53k
78b475797a14c84799063c7cd073962f?s=48 holman
458
270k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
51
2.6k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
203
6.6k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
342
20k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
25k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
10k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k

Transcript

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

    Vue.js for 2020

  2. • 大学 VR × 高齢者で研究 • 新卒で某通信会社 インフラ担当 • Code

    Chrysalis という BootCamp を3ヶ月 • 某通信会社復帰 SIer としてフロント開発 • ギフティ入社半年 @egurinko (江口 徹)

  3. お話しすること 01 02 03 04 Vue3.0 の疑問 Composition API の紹介

    疑問解決への きっかけ まとめ

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

  5. 疑問の始まり LinusBorg 氏の demo を見ると、 同じ Composition API を利用した composables

    と store が 存在する

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

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

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

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

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

    の紹介

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

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

  13. ローダの機能をモジュール化した useLoader の composition function を実装した しかし、あるコンポーネントで Loader の State

    を 変更しても、 Loader が回らない https://what-is-todays-dinner.herokuapp.com 違いに気づいたきっかけ

  14. - App.vue - Recipes.vue - Loader.vue https://what-is-todays-dinner.herokuapp.com 原因 コンポーネントツリー useLoader()

    で state の変更 useLoader() で state を参照

  15. - App.vue - Recipes.vue - Loader.vue https://what-is-todays-dinner.herokuapp.com 原因 コンポーネントツリー useLoader()

    で state の変更 useLoader() で state を参照 それぞれのスコープがグローバルではなかった・・・

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

  17. https://what-is-todays-dinner.herokuapp.com 良く確認したら、 Linus さんの demo では、 Store として利用したい項目は provide でグローバルスコープへ

    inject を利用して各コンポーネントで 利用するようになっていた store/ 配下

  18. https://what-is-todays-dinner.herokuapp.com つまり、composables と store の境界とは グローバルで参照するべきものは、 composition api と provide/inject

    を利用して store へ、 グローバルで必要のない状態や振る舞いは、 composables へ

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

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