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
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
contribution to astral-sh/uv
shunsock
0
540
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
Software Architecture
hschwentner
6
2.3k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.5k
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.4k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
250
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Cult of Friendly URLs
andyhume
79
6.6k
The Invisible Side of Design
smashingmag
302
51k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Agile that works and the tools we love
rasmusluckow
331
21k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり