Question

[vuex]不会在变异处理程序之外变异vuex存储状态。

尝试编辑字段时，此消息显示在终端中。

如何正确使用表格？

<div class="content">
  <input type="checkbox">
</div>

-

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

显示相同的错误

错误：[vuex]不在变异之外变异vuex存储状态处理程序。

Answer 1

您可以尝试：

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

Answer 2

问题是您的v-model直接在this.$store.state.form.email上运行，但是您计算出的 getter 只处理this.$store.state.form对象。

与v-model一起使用时，您计算出的getter / setter方法仅应在单个属性上起作用。

例如

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

vuex不会在变异处理程序之外变异vuex存储状态

2 个答案: