vuex 不会在变异处理程序之外改变 vuex 存储状态 [英] vuex do not mutate vuex store state outside mutation handlers
问题描述
[vuex] 不要在变异处理程序之外改变 vuex 存储状态.
尝试编辑字段时，此消息会显示在终端中.
如何正确使用表格?
-
数据(){返回 {形式: {电子邮件:空}};},计算:{...mapGetters('auth', ['getSeller'])},方法: {...mapActions('auth', ['setSeller'])},创建(){this.form.email = this.getSeller.email;}--
vue.runtime.esm.js?2b0e:619 [Vue 警告]:观察者回调错误function () { return this._data.$$state }":Error: [vuex] do不要在变异处理程序之外改变 vuex 存储状态."更新:
<div><q-toggle v-model="FormState.email"/></模板><脚本>导出默认{计算:{表单状态:{得到 () {返回 this.$store.state.form},设置(val){this.$store.commit('auth/setSeller', val)}}}}
显示相同的错误
<块引用>错误:[vuex] 不要在变异之外改变 vuex 存储状态处理程序.
问题在于您的 v-model 直接在 this.$store.state.form.email 但你计算的 getter 只处理 this.$store.state.form 对象.
如果与 v-model 一起使用，你的计算 getter/setter 应该只对单个属性起作用.
例如
计算:{表单电子邮件:{得到 () {返回 this.$store.state.form.email},设置(val){//假设这会在某处改变 form.email 状态this.$store.commit('auth/setSeller', val)}}}[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.
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)
}
}
}
这篇关于vuex 不会在变异处理程序之外改变 vuex 存储状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
