为什么在变异处理程序内部对“变异处理程序外部的Vuex存储状态”进行变异时出现错误？

Question

编辑一个文本字段（更新商店）时出现此错误：

---

我已经尝试过将@change和v-model放在文本字段上，这是不合适的。需要找到一种适当的方法来更改由文本字段触发的事件的状态。

示例： Profile.vue ：

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

---

这是我的代码：

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

答案：

• 从delete this.profileData删除created()

• 将set()更改为`setData'

• 更改为Object.assign（如果使用string-> parse或Object.assign都没关系）

• 在文本字段上方，在卡上放置一个更改事件。这样，我们不必复制vue风格的事件侦听器。

<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>