はじめに
Vuexの以下ヘルパーについて、最低限の使い方をまとめました。
大きく分けて以下2つに分けて覚えればOKです。
1.状態を呼び出す
mapStatemapGetters
2.状態を変化させる
mapMutationsmapActions
※Vuexの導入方法やstateとは？という基本については当記事では触れていません。
環境
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
map○○を使うメリット
以下のようにシンプルに呼び出せることが最大のメリットです。
this.$store.state.state1 //通常
this.state1 //mapState使用
this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用
this.$store.commit('mutation1', 引数) //通常
this.mutation1(引数) //mapMutations使用
this.$store.dispatch('action1', 引数) //通常
this.action1(引数) //mapActions使用
使い方
1.Vuexから使うヘルパーをインポート
まず、全てのヘルパーに共通の作業です。
以下のようにそのコンポーネント内で使うヘルパーをインポートします。
Anything.vue
<script>
import { mapState } from 'vuex'
//...
</script>
複数使う場合は,区切りで書けばOKです。
Anything.vue
<script>
import { mapGetters, mapMutations } from 'vuex'
//...
</script>
2.必要なstate, getters, mutations, actionsをリストアップ
このリストアップ方法は複数ありますが、そのバリエーションは公式ドキュメントや他記事をご参照下さい。
当記事では最も使われると思われる
- スプレッド演算子を使用して書く
- ストア内の名前とテンプレート内で呼び出す名前が同じになる
というパターンのみ記載します。
※ここから書く場所が
-
computed内 -
methods内
の２通りに分かれるのでご注意下さい。
2-1.mapState, mapGettersの場合
computed内に書く
※mapGettersの場合を例にします。
Anything.vue
<script>
import { mapGetters } from 'vuex'
export default {
//...
computed: {
...mapGetters([
'getter1',
'getter2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherComputed() {
//...
}
//...
}
</script>
2-2.mapMutations, mapActionsの場合
methods内に書く
Anything.vue
<script>
import { mapGetters } from 'vuex'
export default {
//...
methods: {
...mapActions([
'action1',
'action2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherMethod() {
//...
}
//...
}
</script>
3.テンプレート内でリストアップしたものを使用する
3-1.mapState, mapGetters
以下のように呼び出せます。
冒頭で触れたとおり、非常にシンプルです。
Anything.vue
this.getter1
this.getter2
3-2.mapMutations, mapActions
以下のように呼び出せます。
該当のactionに引数がある場合、()内に引数を入れればOKです。
Anything.vue
this.action1(引数)
this.action2(引数)
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです