Slide 1
Slide 1 text
頑張らないオレオレVuex規約を
作った話
2020/01/15 v-kansai#13
Ryosuke Izumi
Slide 2
Slide 2 text
Ryosuke Izumi
WebApplication / IoT
AWS / Vue / TypeScript / Serverless
v-kansai organizer
@is_ryo
Slide 3
Slide 3 text
Vue 使ってますか？
Slide 4
Slide 4 text
Vuexって使ってますか？
Slide 5
Slide 5 text
Vuexってめちゃくちゃ便利ですよね
Slide 6
Slide 6 text
そう便利…なんだけど……
Slide 7
Slide 7 text
Vuexの治安悪くなりがち
Slide 8
Slide 8 text
● 巨大化する State…
● 直接呼ばれるmutation…
● getters？actions？なにそれおいしいの？
● modulesが分けられてない…
● とりあえず Vuex に突っ込んでおくかーみ
たいな風潮
● ゴミ箱と化すStore
● etc...
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
そうだ。規約を作ろう。
Slide 11
Slide 11 text
下記3点を解決できるような、かつあんまり頑張
らない規約を作った
● Storeの中身を整理したい
● 整理した上でComponentがどのStoreを使って
いるのかわかりやすくしたい
● Storeに Store.hoge でアクセスしたくない
Slide 12
Slide 12 text
stores/ 以下にVuex関係の
ソースを置く
Slide 13
Slide 13 text
ディレクトリ構成はこんな感じ
src/stores/
├── module.ts
├── module_2.ts
├── store.ts
└── types.d.ts
Slide 14
Slide 14 text
modulesを切って、それぞ
れのModuleファイルを生成
する
Slide 15
Slide 15 text
Moduleの構成要素は、
namespaced / state /
mutations / actions
(/ getters)
Slide 16
Slide 16 text
store.ts
Slide 17
Slide 17 text
flags.ts(moduleファイル(一部抜粋))
Slide 18
Slide 18 text
直接 mutations を使わない
Slide 19
Slide 19 text
● 直接 Store.commit("hoge") って書きたくない
● actions 経由で mutations を使う
● Store.dispatch("hogehoge") って書いていく
Slide 20
Slide 20 text
なぜ action 経由で mutaiton を呼び出すのか？
Vuex のドキュメントには「Vuex では全ての
mutationは同期的に行うという作法になってい
ます」と書いてあって「actionの中では非同期の
操作を行うことができる」となっているので、基
本的に action を経由するようにしている
Slide 21
Slide 21 text
createNamespacedHelpers
を使って、Storeとやり取り
する
Slide 22
Slide 22 text
● というかそもそも Store.hoge って書きたくな
い…
● あと import Store from "@/stores/store" と
も書きたくない…
● せっかく namespace 切ったんだから
NamespacedHelpers を使う
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
まとめ
Slide 27
Slide 27 text
● NamespacedHelpers 便利
● 治安を守るためにはちゃんと規約を作ろう
● といっても必要となる規約はどこも違うだろう
から参考程度になれば嬉しい
Slide 28
Slide 28 text
おわり