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.4k
頑張らないオレオレVuex規約を作った話
is_ryo
January 15, 2020
Tweet
Share
More Decks by is_ryo
See All by is_ryo
TypeScriptでWebAssemblyに入門しよう
is_ryo
0
45
Honoが良さそう🔥
is_ryo
1
560
LambdaのNodejsをアップデートしたら困った話
is_ryo
2
1.1k
AppSyncで始めるGraphQL
is_ryo
1
550
Other Decks in Programming
See All in Programming
puregoの活用例
aethiopicuschan
0
220
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Ruby Function Composition
bkuhlmann
1
330
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
100
ゆるい個人開発のススメ
kuroppe1819
10
950
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
340
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.7k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
Featured
See All Featured
Optimizing for Happiness
mojombo
370
69k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Designing for humans not robots
tammielis
247
25k
A Philosophy of Restraint
colly
196
16k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Unsuck your backbone
ammeep
662
57k
Code Review Best Practice
trishagee
54
15k
YesSQL, Process and Tooling at Scale
rocio
163
13k
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 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい
おわり