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 と Composables の違い
Search
Toru Eguchi
December 11, 2019
Technology
3
3.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.2k
このタイミングで Vue.js に TypeScript を導入するには?
egurinko
1
1.5k
How to start making a VR application with Unity
egurinko
0
39
Other Decks in Technology
See All in Technology
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Being A Developer After 40
akosma
72
580k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Gamification - CAS2011
davidbonilla
78
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Navigating Team Friction
lara
181
13k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Become a Pro
speakerdeck
PRO
15
4.8k
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