プログラミング技術

本サイトはプロモーションが含まれています。

Vue.jsでVuexを使う。Vuexのメリット・デメリット

vuexを使うメリット・デメリット
初心者さん
Vuexって何？Vuexの使い方を知りたい。

このような疑問をお持ちの方に向けて書いています。この記事では以下の点を知ることができます。

  1. Vuexを使うと何ができるのか
  2. Vuexの使い方
  3. Vuexのgetterについて
  4. Vuexのmutationについて
  5. Vuexのactionについて

Vuexとは

VuexとはVue.jsを使いある程度の規模のアプリケーション開発を行うと、コンポーネント間でデータの受け渡しが発生します。その時に複雑になるデータを管理するためのライブラリという感じです。

小規模なアプリケーションの場合は無理して使う必要がないと思うけど、コンポーネントが増えて同じデータを親、子、孫といったコンポーネントで使う場合に管理が難しくなるために登場したのがVuexというわけです。

Vuexを使う理由

親コンポーネントから子コンポーネントくらいであれば、propsを使い値を渡すことができるが、孫コンポーネントから親に渡す時に$emitで子に渡し、さらに親に$emitで渡すという流れになり、データの流れを追うのが難しくなります。

Vuexを使うことで、そのような煩わしいデータのやり取りがなくなり、同じデータを参照して管理しやすくなるというわけです。

Vuexを使う場合に理解すること

Vuexでは、主に以下の使い方について理解しておく必要があります。

POINT

  • state
  • getters
  • mutations
  • actions

Vuexを使うメリット・デメリット

Vuexって上でも書いた通り、コンポーネント間の複雑な値の受け渡しを簡単にしましょうというものです。

Vuexを使うメリット

メリット

  • 複雑な値のやり取りを簡単にできる
  • 規模が大きいシステムの場合、保守しやすい

データの管理がシンプルになるため、コードが見やすくなります。積極的に使っていく方が良いと感じます。

Vuexを使うデメリット

デメリット

  • 開発のルールを決めておかないと、いろんな方法で書くことができてしまう。

この後、書き方を紹介していきますが、いろんな書き方でも動いてしまうので、チーム間でルールを決めて開発していく必要があります。

すべてのデータを管理すると無駄な処理が増えるため、値の受け渡しが発生しない場合は、dataを使って管理するでいいのではと思います。

Vuexの基本

Vuexを使う場合、state, getters, mutations, actionsとさらに拡張というか、もう少し使いやすいmapState, mapGetters, mapMutations, mapActionsがあるので順番に確認していきます。

store.js

export default new Vuex.Store({
  state: {
    count: 1
  },
});

stateとmapState

state

各コンポーネントで持っているdataプロパティのようなもの。どこからでもアクセス可能なグローバル変数をイメージするとわかりやすいかも。

component

this.$store.state.count

mapState

mapStateを使うと上でthis.$store.state.countを書いていたのをもう少し簡単に使うことが可能になる。

mapStateはオブジェクトなので、computed内で使う場合、スプレット演算子を使うことでマージして使うことが可能に。

component

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(["count"])
    // this.$store.state.countと同様
  }
}
</script>

gettersとmapGetters

getters

各コンポーネントにあるcomputedと同じような使い方になる。

gettersはcomputedと同様に依存関係に基づいて計算され、変更された時に再評価されるという特徴がある。

component

this.$store.getters.count

mapGetters

mapGettersを使うと、this.$store.getters.countを書いていたのをもう少し簡単に使うことが可能になる。再評価されるcomputedに書くのがよい。

component

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(["count"])
    // this.$store.getters.countと同様
  }
}
</script>

mutationsとmapMutations

mutations

mutationsはstoreのデータを更新する場合に使用される。更新する場合にはcommitを使用します。

component

this.$store.commit('countUp')

mapMutations

mapMutationsは、methodsの中に書きます。

component

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(["countUp"])
    // this.$store.commit('countUp')と同様
  }
}
</script>

actionsとmapActions

actions

actionsは各コンポーネントにあるmethodsのような使い方になります。actionsを実行する場合はdispatchを使用します。引数に取っているcontextは他のメソッドを実行できたりするstoreのインスタンスのようなものです。

component

this.$store.dispatch('countUpExecute')

mapActions

component

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(["countUpExecute"])
    // this.$store.dispatch('countUpExecute')と同様
  }
}
</script>

まとめ

まとめ

Vuexを使ってみると値の受け渡しがシンプルになるだけでも使ってよかったと感じます。

フィアルの切り出しやcommitのルール等、チーム間でしっかりルールを決めて開発してみましょう。

関連記事
Vue.jsでVuexを使う。Vuexのメリット・デメリット
関連記事
ITエンジニアに転職したい人におすすめするプログラミングスクール3選

プログラミングを頑張りたいという方は、独学で学んでみて本格的に学びたいと感じたらプログラミングスクールに通うのがおすすめです。いきなりプログラミングスクールに通うというのはやめましょう。

-プログラミング技術