如何通过组合 API 创建和使用计算属性的 setter

Question

我有一个 Vue 2 应用程序，它使用合成 API 包，以便我可以使用合成 API 创建 vue 组件。

如何通过 Vue 组合 API 创建和使用计算属性的 setter？

我正在查看文档，但没有看到任何为计算属性创建设置器的文档。在测试套件中，我看到一个示例：

 const b = computed({
   get: () => a.value + 1,
   set: (v) => (a.value = v - 1),
 })

但是我不太确定如何访问set上的方法b。有谁知道如何使用组合 API 的 set 方法创建计算属性？如何使用 set 方法来更改计算属性的值？

Answer 1

在 vue3 组件中，您可以像这样使用它：

<template>
  <p>a={{ a }} b={{ b }}</p>
  <button @click="b = 3">Click me</button>
</template>

<script setup>
import {computed, ref} from 'vue';

const a = ref(1);
const b = computed({
  get: () => a.value + 1,
  set: (v) => (a.value = v - 1),
})
</script>

b单击按钮时调用setter （赋值b = 3）

另一种方法是在标签内使用computed部分<script>（选项 api，不带<script setup>部分）：

<template>
  <p>a={{a}} b={{b}}</p>
  <button @click="b = 3">Click me 1</button>
</template>


<script>
export default {
  name: "Test",
  data(){
    return {
      a: 1
    }
  },
  computed: {
    b:{
      get(){return this.a + 1;},
      set(v){this.a = v - 1;}
    }
  }
}
</script>