Почему я получаю сообщение об ошибке изменения состояния хранилища Vuex вне обработчиков мутации, находящегося внутри обработчика мутации? - PullRequest
Новая
       10

Почему я получаю сообщение об ошибке изменения состояния хранилища Vuex вне обработчиков мутации, находящегося внутри обработчика мутации?

0 голосов
/ 10 июня 2019

Я получаю эту ошибку при редактировании одного из текстовых полей (которое обновляет магазин):

1

Я уже пытался поместить @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,
}

1 Ответ

0 голосов
/ 10 июня 2019

Ответ:

  • Удалить 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>
...