Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@akifo

Vue.js の Vuex における mapGetters と、 this.$store.getters の使い分け

More than 1 year has passed since last update.

Vue Component から Vuex の getters を利用する際の、複数ある書き方をどのように使い分けるべきか自分なりに整理してまとめたものです。この考え方が一般的に正しいわけではなく、プロジェクトごとにある程度ルールを決めておくとコードに統一感が出てメンテナブルになり嬉しいので、自分が関わるプロジェクトにコーディングルールを提案するための情報整理です。

this.$store.getters['SOME']

  • 基本的にはこちらを使う

mapGetters

  • 同じコンポーネント内で、3回以上同じ this.$store.getters['SOME'] は書かない
  • template 内で参照したい場合
  • computed で宣言したい場合

computed get set を使う

immutable でななく、変更したい場合は computed を set と get で書く方法を覚えておくと便利です。

todo.vue
  computed: {
    todos: {
      get () {
        return this.$store.getters['todos']
      },
      set (value) {
        this.$store.commit('SET_TODOS', value)
      }
    }
  },
vuex/index.js
const getters = {
  todos: state => state.todos
}

const mutations = {
  SET_TODOS (state, val) {
    state.todos = val
  }
}

このように回りくどいような書き方をするのは、単一の方向でデータの状態を管理させるためです。

下記の図では Vue Components > Actions > Mutations という流れですが、上記で書いた例では Actions を飛ばしています。Actions を飛ばして書くのはアンチパターンだという説もありますが、私は Vue Components > Mutations の流れでも OK だと考えていますので、Vue Component で this.$store.commit['SET_TODOS'] を利用しています。

vuex.png

参照 https://vuex.vuejs.org/ja/

使い分けのルールまとめ

mapGetters は import して使うので、これがあるとコードを初めて読んだ人でも、Vuex から参照している情報であることが分かります。一方で this.$store.getters と書いた場合、Vuex を知らない人が読むとどこから参照している書き方なのか分かりません。ググラビリティ的に mapGetters のほうが良いと考えています。

ですが、基本的には this.$store.getters['SOME'] を使うと書きました。1回しか書かない場合、どこから参照しているか確認する必要がない場合が多いためです。 SOME の部分で具体的に何を get しているのかが明確に分かるようにしておけば、OK です。

また、Getters だけではなく、Mutations も Actions もほぼ同じように考えますが、同じコンポーネント内で、 繰り返して同じ commit と dispatch を 3回以上書くことがあまりないため、ほぼ mapMutations と mapActions は使っていないかもしれません。

getters は template 内で参照したいことがよくあるので、mapGetters は高頻度で利用しています。

最後に

一般的にルールがあるわけではありませんが、自分で簡単な決まりを作るとコーディングがしやすくなるので、オススメです。気になる点や、ご指摘ございましたらお気軽にコメントください!

29
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
akifo
フリーランスの JavaScript エンジニアです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?