不要在变异处理程序之外改变 Vuex 存储状态(错误) [英] Do not mutate Vuex store state outside mutation handlers (ERROR)
问题描述
所以我收到以下错误消息:
[Vuex] 不要在变异处理程序之外改变 vuex 存储状态.
根据 Vuex docs 出现此错误的原因是因为以下代码试图直接改变状态.
<div v-for="基本信息中的项目" :key="item.id"><el-col :span="12"><el-form-item label="名字"><el-input v-model="item.firstName"/></el-form-item></el-col></模板>导出默认{计算:{...mapState(['teststore']),基本信息: {得到() {返回 this.teststore.personData.basicInformation},设定值) {this.$store.commit('updateBasic', value)}}}}
我明白为什么 Vuex 会抛出那个错误，因为我仍在尝试直接改变状态.因此，根据文档，针对此特定问题的解决方案是使用带有 setter 的双向计算属性(如上例所示)，这对于单个输入字段来说效果很好.但是，我有很多输入框供用户填写.考虑以下代码:
personData:{基本信息: [{名: ''，姓: ''，电子邮件: ''，电话: ''，街道: ''，城市: ''，位置: ''，网站: ''，}],}使用 setter 为我的所有输入字段创建双向计算属性似乎非常冗长.有没有一种简单的方法可以使用 Vuex，最好是 v-model 和一组对象来创建输入字段?
我会这样做:
Codesandbox:https://codesandbox.io/s/vuex-store-ibjbr
<div><div v-for="(value, key) in basicInformation" :key="key"><el-col :span="12"><el-form-item :label="keyToLabel(key)"><el-input :value="value" @input="onInput({ key, value: $event })"/></el-form-item></el-col></模板><脚本>导出默认{计算:{...mapState(['teststore']),基本信息() {返回 this.teststore.personData.basicInformation},},方法: {onInput({ key, value }) {this.$store.commit('updateBasic', { key, value })},keyToLabel(键){//这只是一个例子const keyToLabel = {firstName: '名字',//等等...}返回 keyToLabel[key]},},}//在你的商店里，像这样常量存储 = {//...突变:{updateBasic(状态，{ 键，值}){state.teststore.basicInformation[key] = 值},},}
So I'm getting the following error message:
[Vuex] Do not mutate vuex store state outside mutation handlers.
The reason behind this error according to the Vuex docs is because the following code tries to directly mutate the state.
<template>
<div v-for="item in basicInformation" :key="item.id">
<el-col :span="12">
<el-form-item label="First Name">
<el-input v-model="item.firstName" />
</el-form-item>
</el-col>
</div>
</template>
export default {
computed: {
...mapState(['teststore']),
basicInformation: {
get() {
return this.teststore.personData.basicInformation
},
set(value) {
this.$store.commit('updateBasic', value)
}
}
}
}
I get why Vuex is throwing that error, since I am still trying to directly mutate the state. So a solution for this particular problem according to the docs would be using a two-way computed property with a setter (like in the example above), and that works fine for a single inputfield. However, I have A LOT of inputfields for the user to fill in. Consider the following code:
personData: {
basicInformation: [
{
firstName: '',
surname: '',
email: '',
phone: '',
street: '',
city: '',
position: '',
website: '',
}
],
}
Creating a two-way computed property with a setter for all my inputfields seems very verbose. Is there an easy way where I can use Vuex and preferably v-model with an array of objects to create inputfields?
I would do something like this:
Codesandbox: https://codesandbox.io/s/vuex-store-ibjbr
<template>
<div>
<div v-for="(value, key) in basicInformation" :key="key">
<el-col :span="12">
<el-form-item :label="keyToLabel(key)">
<el-input :value="value" @input="onInput({ key, value: $event })" />
</el-form-item>
</el-col>
</div>
</div>
</template>
<script>
export default {
computed: {
...mapState(['teststore']),
basicInformation() {
return this.teststore.personData.basicInformation
},
},
methods: {
onInput({ key, value }) {
this.$store.commit('updateBasic', { key, value })
},
keyToLabel(key) {
// This is only an example
const keyToLabel = {
firstName: 'First Name',
// And so on...
}
return keyToLabel[key]
},
},
}
// And in your store, something like this
const store = {
// ...
mutations: {
updateBasic(state, { key, value }) {
state.teststore.basicInformation[key] = value
},
},
}
</script>
这篇关于不要在变异处理程序之外改变 Vuex 存储状态(错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
