vuex do not mutate vuex store state outside mutation handlers

问题

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

When trying to edit the fields this message is shown in the terminal.

How do I use the form correctly?

<q-editor v-model="form.email" min-height="5rem" />

-

  data() {
    return {
      form: {
        email: null
      }
    };
  },
  computed: {
    ...mapGetters('auth', ['getSeller'])
  },
  methods: {
    ...mapActions('auth', ['setSeller'])
  },
  created() {
    this.form.email = this.getSeller.email;
  }

--

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

UPDATE:

<template>
  <div>
    <q-toggle v-model="FormState.email" />
  </div>
</template>

<script>
export default {
  computed: {
    FormState: {
      get () {
        return this.$store.state.form
      },
      set (val) {
        this.$store.commit('auth/setSeller', val)
      }
    }
  }
}
</script>

shows the same error

Error: [vuex] do not mutate vuex store state outside mutation handlers.

回答1:

You can try :

<template>
  <q-editor 
    :value="getSeller"  
    min-height="5rem" 
    @input="value => setSeller(value)" />
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: null
        }
      };
    },
    computed: {
      ...mapGetters('auth', ['getSeller'])
    },
    methods: {
      ...mapActions('auth', ['setSeller'])
    }
  }
</script>

回答2:

The issue is that your v-model is operating directly on this.$store.state.form.email but your computed getter only deals with the this.$store.state.form object.

Your computed getter / setter should only work on a single property if used with v-model.

For example

<q-toggle v-model="formEmail" />

computed: {
  formEmail: {
    get () {
      return this.$store.state.form.email
    },
    set (val) {
      // assuming this mutates the form.email state somewhere
      this.$store.commit('auth/setSeller', val)
    }
  }
}

来源：https://stackoverflow.com/questions/57139270/vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers