一、原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 setter,也就是 set 属性,当你尝试直接该改变这个这个计算属性的值,都会报这个警告,vuex还会出现通过commit提交修改vuex值的警告的情况。
参考文档:

二、常见导致该错误的写法
(1)计算属性中传入的是对象和方法,直接对计算属性进行赋值会导致错误
比如:
<template>
<div>
<input v-model='change'/>
</div>
</template>
<script>
export default {
data () {
return {
a: ''
}
},
computed: {
change () {
return this.a
}
}
}
</script>
结合vuex比如:
<template>
<div>
<input v-model='change'/>
</div>
</template>
<script>
export default {
data () {
return {
}
},
computed: {
change () {
return this.$store.state.val
}
}
}
</script>
<template>
<div>
<input v-model='change'/>
</div>
</template>
<script>
export default {
data () {
return {
a: ''
}
},
computed: {
...mapState({
// 获取vuex中某个对象的属性值给页面展示用,页面双向绑定也会更新计算属性
change: state => state.object.change
})
}
}
</script>
<template>
<div>
<div @click='change()'>点我</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
computed: {
...mapState({
// 获取vuex中某个对象的属性值给页面展示用
change: state => state.object.change
})
},
method: {
change () {
this.change = '赋值'
}
}
}
</script>
三、解决方法
(1)将计算属性转成一个对象,使用getter与setter
<div>
<input v-model='change'/>
</div>
</template>
<script>
export default {
data () {
return {
a: ''
}
},
computed: {
//change () {
// return this.a
//}
change :{
// getter 将值赋给change
get: function () {
return this.a
},
// setter 获取改变后的值并设置给a
set: function (newValue) {
this.a = newValue;
}
}
}
}
</script>
(2)vuex获取所需对象而不是具体的属性值,后面进行赋值的操作也会更改vuex中的值(对象按值传递)
<template> <div>
<!--双向绑定会改变vuex中change的值,官方建议通过commit的方式改变vuex值-->
<input v-model='object.change'> <div @click='change()'>点我</div> </div> </template> <script> export default { data () { return { } }, computed: { ...mapState({ // 获取vuex中某个对象的属性值给页面展示用 //change: state => state.object.change object: state => state.object }) }, method: { change () { this.object.change = '赋值' // 同步修改了vuex值 this.change = this.object.change } } } </script>
扩展:
一、vue报错Error in mounted hook: "TypeError: handlers[i].call is not a function"
原因:钩子函数书写错误或者钩子函数中使用了未定义的方法




