頑張らないオレオレVuex規約を作った話

F185d3ea1c138a5fa4efb845967938bb?s=47 is_ryo
January 15, 2020

 頑張らないオレオレVuex規約を作った話

F185d3ea1c138a5fa4efb845967938bb?s=128

is_ryo

January 15, 2020
Tweet

Transcript

  1. 頑張らないオレオレVuex規約を 作った話 2020/01/15 v-kansai#13 Ryosuke Izumi

  2. Ryosuke Izumi WebApplication / IoT AWS / Vue / TypeScript

    / Serverless v-kansai organizer @is_ryo
  3. Vue 使ってますか?

  4. Vuexって使ってますか?

  5. Vuexってめちゃくちゃ便利ですよね

  6. そう便利…なんだけど……

  7. Vuexの治安悪くなりがち

  8. • 巨大化する State… • 直接呼ばれるmutation… • getters?actions?なにそれおいしいの? • modulesが分けられてない… •

    とりあえず Vuex に突っ込んでおくかーみ たいな風潮 • ゴミ箱と化すStore • etc...
  9. None
  10. そうだ。規約を作ろう。

  11. 下記3点を解決できるような、かつあんまり頑張 らない規約を作った • Storeの中身を整理したい • 整理した上でComponentがどのStoreを使って いるのかわかりやすくしたい • Storeに Store.hoge

    でアクセスしたくない
  12. stores/ 以下にVuex関係の ソースを置く

  13. ディレクトリ構成はこんな感じ src/stores/ ├── module.ts ├── module_2.ts ├── store.ts └── types.d.ts

  14. modulesを切って、それぞ れのModuleファイルを生成 する

  15. Moduleの構成要素は、 namespaced / state / mutations / actions (/ getters)

  16. store.ts

  17. flags.ts(moduleファイル(一部抜粋))

  18. 直接 mutations を使わない

  19. • 直接 Store.commit("hoge") って書きたくない • actions 経由で mutations を使う •

    Store.dispatch("hogehoge") って書いていく
  20. なぜ action 経由で mutaiton を呼び出すのか? Vuex のドキュメントには「Vuex では全ての mutationは同期的に行うという作法になってい ます」と書いてあって「actionの中では非同期の

    操作を行うことができる」となっているので、基 本的に action を経由するようにしている
  21. createNamespacedHelpers を使って、Storeとやり取り する

  22. • というかそもそも Store.hoge って書きたくな い… • あと import Store from

    "@/stores/store" と も書きたくない… • せっかく namespace 切ったんだから NamespacedHelpers を使う
  23. None
  24. None
  25. None
  26. まとめ

  27. • NamespacedHelpers 便利 • 治安を守るためにはちゃんと規約を作ろう • といっても必要となる規約はどこも違うだろう から参考程度になれば嬉しい

  28. おわり