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
73
Unknownのことをちゃんと知りたい_関西フロントエンド忘年会
[email protected]
× KINTOテクノロジーズ
is_ryo
0
35
tRPC入門
is_ryo
1
280
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
290
Honoが良さそう🔥
is_ryo
1
1.1k
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.3k
AppSyncで始めるGraphQL
is_ryo
1
630
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
Model Pollution
hschwentner
1
180
プログラマのための作曲入門
cheebow
0
540
Le côté obscur des IA génératives
pascallemerrer
0
120
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fireside Chat
paigeccino
40
3.7k
For a Future-Friendly Web
brad_frost
180
9.9k
Faster Mobile Websites
deanohume
310
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Making Projects Easy
brettharned
119
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
190
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.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 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり