【Vuex】mapState, mapGetters, mapMutations, mapActionsの最低限の使い方まとめ
はじめに
Vuexの以下ヘルパーについて、最低限の使い方をまとめました。
大きく分けて以下2つに分けて覚えればOKです。
1.状態を呼び出す
mapState
mapGetters
2.状態を変化させる
mapMutations
mapActions
※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から使うヘルパーをインポート
まず、全てのヘルパーに共通の作業です。
以下のようにそのコンポーネント内で使うヘルパーをインポートします。
<script>
import { mapState } from 'vuex'
//...
</script>
複数使う場合は,
区切りで書けばOKです。
<script>
import { mapGetters, mapMutations } from 'vuex'
//...
</script>
2.必要なstate
, getters
, mutations
, actions
をリストアップ
このリストアップ方法は複数ありますが、そのバリエーションは公式ドキュメントや他記事をご参照下さい。
当記事では最も使われると思われる
- スプレッド演算子を使用して書く
- ストア内の名前とテンプレート内で呼び出す名前が同じになる
というパターンのみ記載します。
※ここから書く場所が
-
computed
内 -
methods
内
の2通りに分かれるのでご注意下さい。
2-1.mapState
, mapGetters
の場合
computed
内に書く
※mapGettersの場合を例にします。
<script>
import { mapGetters } from 'vuex'
export default {
//...
computed: {
...mapGetters([
'getter1',
'getter2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherComputed() {
//...
}
//...
}
</script>
2-2.mapMutations
, mapActions
の場合
methods
内に書く
<script>
import { mapGetters } from 'vuex'
export default {
//...
methods: {
...mapActions([
'action1',
'action2'
]),
//スプレッド演算子を使うと他のものと共存できる。
otherMethod() {
//...
}
//...
}
</script>
3.テンプレート内でリストアップしたものを使用する
3-1.mapState
, mapGetters
以下のように呼び出せます。
冒頭で触れたとおり、非常にシンプルです。
this.getter1
this.getter2
3-2.mapMutations
, mapActions
以下のように呼び出せます。
該当のactionに引数がある場合、()
内に引数を入れればOKです。
this.action1(引数)
this.action2(引数)
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです
参考にさせて頂いたサイト(いつもありがとうございます)
Author And Source
この問題について(【Vuex】mapState, mapGetters, mapMutations, mapActionsの最低限の使い方まとめ), 我々は、より多くの情報をここで見つけました https://qiita.com/terufumi1122/items/6f9470c8d416a4af7502著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .