Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vuexの公式ドキュメントにあるcounterアプリを作ったあとぐらいの頃に知りたかったことのまとめ その0001 | vuex3.xその0001

参考にさせて頂いたページ

今日の環境

  • vue 2.5.17
  • vuex 3.0.1

はじめに

近頃Vuexを導入するプロジェクトも社内で増えていたり、Vuexを使用する場合の基本的な書き方について聞かれることが増えてきました。

公式ドキュメントからリンクされているcounterアプリを理解したぐらいの頃の自分が知りたかったことをまとめました。

同じような段階の方にVuex入門記事として一助になれば幸いです。

ポイント

基本的なことのうち、以下のことが当時の自分にとって重要だと思いましたので、具体的なコードを書いて過去の自分に書き方を教えるような気持ちでまとめています。

  • 公式ドキュメントでおまけかのように書いてある mapState, mapGetters, mapActions, mapMutaions を使いましょう。
  • 公式ドキュメントでおまけかのように書いてある modules の namespaced をtrueにしましょう。
  • 各moduleのgettersで4つの引数を受け取って、他のモジュールを参照する方法は特に覚えておくと便利です。
  • 各moduleのstateは関数でreturnするとひとつのmodule構造をもとに複数のmoduleをstoreに登録できて便利です。
  • actionsはPromiseを返すようにしておくと、actions内部でmutationsを実行することなく非同期処理をするという役割だけ分離できるので可読性が高まります。
  • v-modelを使わずにデータの流れを単方向にすることは重要です。

具体的なコード

以下のリポジトリにサンプルコードを置きました。

github.com

具体的なファイルとしては以下の2ファイルが主なポイントになると思います。

  • store.js
  • First.vue