vue报类似警告Computed property "isLoading" was assigned to but it has no setter

一、原因：一个计算属性，当计算传入的是一个函数，或者传入的是一个对象，而没有设置 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"

原因：钩子函数书写错误或者钩子函数中使用了未定义的方法