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
72
Unknownのことをちゃんと知りたい_関西フロントエンド忘年会
[email protected]
× KINTOテクノロジーズ
is_ryo
0
35
tRPC入門
is_ryo
1
270
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
280
Honoが良さそう🔥
is_ryo
1
1.1k
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.3k
AppSyncで始めるGraphQL
is_ryo
1
620
Other Decks in Programming
See All in Programming
楽して成果を出すためのセルフリソース管理
clipnote
0
180
Rancher と Terraform
fufuhu
2
550
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
700
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
530
OSS開発者という働き方
andpad
5
1.7k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
旅行プランAIエージェント開発の裏側
ippo012
2
920
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Improving my own Ruby thereafter
sisshiki1969
1
160
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Producing Creativity
orderedlist
PRO
347
40k
Being A Developer After 40
akosma
90
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
A Tale of Four Properties
chriscoyier
160
23k
Context Engineering - Making Every Token Count
addyosmani
3
54
The Language of Interfaces
destraynor
161
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.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 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり