このような疑問をお持ちの方に向けて書いています。この記事では以下の点を知ることができます。
- Vuexを使うと何ができるのか
- Vuexの使い方
- Vuexのgetterについて
- Vuexのmutationについて
- Vuexのactionについて
Vuexとは
VuexとはVue.jsを使いある程度の規模のアプリケーション開発を行うと、コンポーネント間でデータの受け渡しが発生します。その時に複雑になるデータを管理するためのライブラリという感じです。
小規模なアプリケーションの場合は無理して使う必要がないと思うけど、コンポーネントが増えて同じデータを親、子、孫といったコンポーネントで使う場合に管理が難しくなるために登場したのがVuexというわけです。
Vuexを使う理由
親コンポーネントから子コンポーネントくらいであれば、propsを使い値を渡すことができるが、孫コンポーネントから親に渡す時に$emitで子に渡し、さらに親に$emitで渡すという流れになり、データの流れを追うのが難しくなります。
Vuexを使うことで、そのような煩わしいデータのやり取りがなくなり、同じデータを参照して管理しやすくなるというわけです。
Vuexを使う場合に理解すること
Vuexでは、主に以下の使い方について理解しておく必要があります。
- 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のルール等、チーム間でしっかりルールを決めて開発してみましょう。
プログラミングを頑張りたいという方は、独学で学んでみて本格的に学びたいと感じたらプログラミングスクールに通うのがおすすめです。いきなりプログラミングスクールに通うというのはやめましょう。