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
頑張らないオレオレVuex規約を作った話
Search
is_ryo
January 15, 2020
Programming
4
2.8k
頑張らないオレオレVuex規約を作った話
is_ryo
January 15, 2020
Tweet
Share
More Decks by is_ryo
See All by is_ryo
生成AIとエンジニアの仕事と私~実践知を添えて~
is_ryo
0
77
Unknownのことをちゃんと知りたい_関西フロントエンド忘年会
[email protected]
× KINTOテクノロジーズ
is_ryo
0
36
tRPC入門
is_ryo
1
280
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
290
Honoが良さそう🔥
is_ryo
1
1.2k
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.3k
AppSyncで始めるGraphQL
is_ryo
1
630
Other Decks in Programming
See All in Programming
Developer Joy - The New Paradigm
hollycummins
1
370
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
250
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
NIKKEI Tech Talk#38
cipepser
0
230
Software Architecture
hschwentner
6
2.3k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
480
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
CSC305 Lecture 10
javiergs
PRO
0
250
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Being A Developer After 40
akosma
91
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
KATA
mclloyd
PRO
32
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Transcript
頑張らないオレオレVuex規約を 作った話 2020/01/15 v-kansai#13 Ryosuke Izumi
Ryosuke Izumi WebApplication / IoT AWS / Vue / TypeScript
/ Serverless v-kansai organizer @is_ryo
Vue 使ってますか?
Vuexって使ってますか?
Vuexってめちゃくちゃ便利ですよね
そう便利…なんだけど……
Vuexの治安悪くなりがち
• 巨大化する State… • 直接呼ばれるmutation… • getters?actions?なにそれおいしいの? • modulesが分けられてない… •
とりあえず Vuex に突っ込んでおくかーみ たいな風潮 • ゴミ箱と化すStore • etc...
None
そうだ。規約を作ろう。
下記3点を解決できるような、かつあんまり頑張 らない規約を作った • Storeの中身を整理したい • 整理した上でComponentがどのStoreを使って いるのかわかりやすくしたい • Storeに Store.hoge
でアクセスしたくない
stores/ 以下にVuex関係の ソースを置く
ディレクトリ構成はこんな感じ src/stores/ ├── module.ts ├── module_2.ts ├── store.ts └── types.d.ts
modulesを切って、それぞ れのModuleファイルを生成 する
Moduleの構成要素は、 namespaced / state / mutations / actions (/ getters)
store.ts
flags.ts(moduleファイル(一部抜粋))
直接 mutations を使わない
• 直接 Store.commit("hoge") って書きたくない • actions 経由で mutations を使う •
Store.dispatch("hogehoge") って書いていく
なぜ action 経由で mutaiton を呼び出すのか? Vuex のドキュメントには「Vuex では全ての mutationは同期的に行うという作法になってい ます」と書いてあって「actionの中では非同期の
操作を行うことができる」となっているので、基 本的に action を経由するようにしている
createNamespacedHelpers を使って、Storeとやり取り する
• というかそもそも Store.hoge って書きたくな い… • あと import Store from
"@/stores/store" と も書きたくない… • せっかく namespace 切ったんだから NamespacedHelpers を使う
None
None
None
まとめ
• NamespacedHelpers 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり