摘要：
1、 原因：对于计算属性，当从计算传入函数或对象，但未设置setter，即set属性时。当您尝试直接更改此计算属性的值时，您将报告此警告，而vuex也将报告有关通过提交修改vuex值的警告。
一、原因：一个计算属性，当计算传入的是一个函数，或者传入的是一个对象，而没有设置 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"
原因：钩子函数书写错误或者钩子函数中使用了未定义的方法