解决Computed property “name“ was assigned to but it has no setter.问题

前几天有个朋友问我这样的一个问题

解释一下这个警告，这个警告说“计算属性“name”已经分配，但是没有setter”,其实这个警告想告诉开发者你不能直接去修改computed定义好的值，只能通过computed里面的setter方法去修改定义该计算属性，
如何解决呢？看一下下面的例子

<template>
  <div class="main">
    <input type="text" v-model="name" />
    <div class="button" @click="changename">
      <el-button type="primary" size="small">点击修改vuex中的name</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dates: "s",
    };
  },
  computed: {
    name() {
      return 123;
    },
  },
  methods: {
    changename() {
      this.name = "222";
    },
  },
};
</script>
<style>
.main {
  padding: 60px;
  box-sizing: border-box;
}
.button {
  margin: 20px;
}
</style>

如果点击上面的按钮或在输入框修改值就会有Computed property “name“ was assigned to but it has no setter警告出现，因为点击了按钮或在输入框修改就会去修改name的值，

computed: {
    name() {
      return 123;
    },
  },

上面name的定义就是默认只是get方法（只读），如果这时候在其他事件中改变计算属性上的name的值，就一定会出现警告，那怎么解决呢？vue官网有说明

getter 只是取计算属性的name的值，setter是给计算属性的name赋值，那么只需要像下面那样改就行了

 computed: {
    name: {
      get() {
        return 123;
      },
      set(newValue) {
        return newValue;
      },
    },
  },

那么这个警告就会没有了！