Why do I get an error for mutating “Vuex store state outside of mutation handlers” while inside a mutation handler?

Question

I am getting this error when I edit one of the text fields (which updates the store):

---

I've already tried putting @change and v-model on the text fields and that is not proper. Need to find a proper way to mutate the state on an event triggered by the text field(s).

Example: Profile.vue :

<v-text-field @change="setProfile(profileData)" v-model="profileData.groupName" label="Group Name"></v-text-field>

---

Here is my code:

Profile.vue :

<v-text-field @change="set" v-model="profileData.groupName" label="Group Name"></v-text-field>

Profile.vue Javascript :

import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Profile",
  created() {
    delete this.profileData;
    this.profileData = JSON.parse(JSON.stringify(this.getProfile()));
    console.log(this.profileData);
  },
  data() {
    return {
      profileData: {
        groupName: null,
        groupClid: null,
        groupContact: null
      }
    };
  },
  methods: {
    set() {
      this.$store.commit("setProfile", this.profileData);
    },
    ...mapGetters(["getProfile"]),
    ...mapMutations(["setProfile"])
  }
}

build.js --> store.js:

const state = {
    profile: {
        "groupName": "Happy group",
        "groupNumber": "9999999999",
        "groupContact": "Bob Ross"
    }
};

const getters = {
    getProfile: (state) => state.profile,
};

const actions = { };

const mutations = { 
    setProfile: (state, profile) => (state.profile = profile)
};

export default {
    state,
    getters,
    actions,
    mutations,
}

Answer 1

Answer:

• Remove delete this.profileData from created()

• Change the set() to `setData'

• Change to Object.assign (shouldn't matter if you use string->parse or Object.assign)

• Put one change event on the card, above the text fields. This way, we don't have to duplicate the vue-style event listener.

<template >
  <v-container fluid>
    <v-layout row wrap fill-height>
      <v-flex xs6>
        <v-card elevation="10">
          <v-card-title primary-title class="pb-0">
            <div>
              <h3 class="headline mb-0 pb-0">Group Information</h3>
            </div>
          </v-card-title>
          <v-card-text @change="setData">
            <v-container fluid>
              <v-layout align-center row wrap>
                <v-flex xs3>
                  <v-responsive>Group Name:</v-responsive>
                </v-flex>
                <v-flex xs9>
                  <v-text-field v-model="profileData.groupName" label="Group Name"></v-text-field>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <v-spacer></v-spacer>
  </v-container>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Profile",
  created() {
    this.profileData = Object.assign({}, this.getProfile());
  },
  data() {
    return {
      profileData: {}
    };
  },
  methods: {
    setData() {
      this.setProfile(this.getData());
    },
    getData() {
      return Object.assign({}, this.profileData);
    },
    ...mapGetters(["getProfile"]),
    ...mapMutations(["setProfile"])
  }
};
</script>