[vuex] do not mutate vuex store state outside mutation handlers. 対策

やりたいこと

• 原因
• 対策

いってみよう！

原因

テキストボックスにvuexの内容を入れたら起きるようです。

<template>
  <v-text-field
    v-model='user["id"]'
  ></v-text-field>
</template>

<script>
    export default {
        data: () => ({
            user: {}
        }),
        mounted() {
            this.user = this.$store.getters['user']
        }
    }
</script>

この状態で、テキストボックスの内容を変更すると、
[vuex] do not mutate vuex store state outside mutation handlers.
になります。

対策

this.user = {
              id: this.$store.getters['user']["id"],
              name: this.$store.getters['user']["name"],
            }

ちゃんとキーまで入れると上記のエラーが解消されます。
直接 this.$store.getters['user'] を入れるのがダメで、考えてみればオブジェクトをそのまま入れてるのでvuexの内容を書きかえてしまっていますね。