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.5k
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.4k
このタイミングで Vue.js に TypeScript を導入するには?
egurinko
1
1.8k
How to start making a VR application with Unity
egurinko
0
52
Other Decks in Technology
See All in Technology
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
100
New Cache Hierarchy for Container Images and OCI Artifacts in Kubernetes Clusters using Containerd / KubeCon + CloudNativeCon Japan
pfn
PRO
0
140
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
770
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
9
5.8k
やさしい認証認可
minorun365
PRO
29
12k
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
130
OpenTelemetry Collector internals
ymotongpoo
5
530
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
310
Snowflake Intelligenceで実現できるノーコードAI活用
takumimukaiyama
1
200
API の仕様から紐解く「MCP 入門」 ~MCP の「コンテキスト」って何だ?~
cdataj
0
140
Nonaka Sensei
kawaguti
PRO
3
610
Kotlinで学ぶ 代数的データ型
ysknsid25
5
1.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Producing Creativity
orderedlist
PRO
346
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
Code Review Best Practice
trishagee
68
18k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Gamification - CAS2011
davidbonilla
81
5.3k
BBQ
matthewcrist
89
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Speed Design
sergeychernyshev
30
990
Designing for Performance
lara
609
69k
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