【Vuex】同じmutationsが多数繰り返されるエラーが発生していたら確認した方がいいこと

3936 ワード
初心者 Vue.js Vuex 初心者 テキストリンク

はじめに

先日、こちらの記事を書きました。
【Vuex】mapState, mapGetters, mapMutations, mapActionsの最低限の使い方まとめ - Qiita

上記に関連して、記事を書こうと思ったきっかけになったエラーについても記録として残しておこうと思います。

以下のように同じmutationsが繰り返されていたら怪しんでみて下さい

環境

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2

エラー原因

computedプロパティ内に...mapMutationsを書いてしまっている。

methodsプロパティ内に書くのが正しいです。

ダメな例

Anything.vue
//...
    computed: {
      ...mapMutations([
        'anyMutation',
      ]),
    },
    methods: {
      anyMethod() {
        this.anyMutation()
      }
    }
//..

良い例

Anything.vue
//..
    methods: {
      ...mapMutations([
        'anyMutation',
      ]),
      anyMethod() {
        this.anyMutation()
      }
    }
//..

これで無事読み込まれます。

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです