一、原因:一个计算属性,当计算传入的是一个函数,或者传入的是一个对象,而没有设置 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"
原因:钩子函数书写错误或者钩子函数中使用了未定义的方法