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

651dbae5f19db82c6b89191a6c9dcd47?s=47 Toru Eguchi
December 11, 2019

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

651dbae5f19db82c6b89191a6c9dcd47?s=128

Toru Eguchi

December 11, 2019
Tweet

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 には、2 つの使い方がある この違いは一体なんなんだろう?

  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