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.5k
頑張らないオレオレVuex規約を作った話
is_ryo
January 15, 2020
Tweet
Share
More Decks by is_ryo
See All by is_ryo
tRPC入門
is_ryo
1
140
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
120
Honoが良さそう🔥
is_ryo
1
840
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.2k
AppSyncで始めるGraphQL
is_ryo
1
570
Other Decks in Programming
See All in Programming
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
マルチモジュールにおけるテスト最適化
fxwx23
0
110
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
130
TypeScriptとGraphQLを活用した変化に強いプロダクト作り
bicstone
4
550
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
BasicBasic認証
sadnessojisan
5
2.5k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
250
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
7
5k
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
Meet BrowserEngineKit
swiftty
0
190
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
333
56k
GitHub's CSS Performance
jonrohan
1029
450k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Code Reviewing Like a Champion
maltzj
518
39k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Writing Fast Ruby
sferik
623
60k
BBQ
matthewcrist
83
9.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
5 minutes of I Can Smell Your CMS
philhawksworth
201
19k
The World Runs on Bad Software
bkeepers
PRO
64
11k
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 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり