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