為什么在變異處理程序內部變異“突變處理程序之外的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

回答：

• 從created()刪除delete this.profileData

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