Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue 3.0 Composition API を利用した Store と Composabl...
Search
Toru Eguchi
December 11, 2019
Technology
3
4.7k
Vue 3.0 Composition API を利用した Store と Composables の違い
Toru Eguchi
December 11, 2019
Tweet
Share
More Decks by Toru Eguchi
See All by Toru Eguchi
Vue 3.0 Composition API に触ってみた
egurinko
3
1.5k
このタイミングで Vue.js に TypeScript を導入するには?
egurinko
1
1.8k
How to start making a VR application with Unity
egurinko
0
55
Other Decks in Technology
See All in Technology
Building a cloud native business on open source
lizrice
0
190
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
420
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
頭部ふわふわ浄酔器
uyupun
0
230
オブザーバビリティが育むシステム理解と好奇心
maruloop
3
1.4k
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
6
1.2k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
160
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
290
Okta Identity Governanceで実現する最小権限の原則
demaecan
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
serverless team topology
_kensh
3
240
AWS re:Invent 2025事前勉強会資料 / AWS re:Invent 2025 pre study meetup
kinunori
0
650
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Docker and Python
trallard
46
3.6k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
A designer walks into a library…
pauljervisheath
209
24k
Designing for Performance
lara
610
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Balancing Empowerment & Direction
lara
5
700
Transcript
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 には、2 つの使い方がある この違いは一体なんなんだろう?
ということで、 試して、 探ってみた 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