计算设置器(Setter)

在上一个练习中，您了解了如何编写可维护的声明性计算属性，这些属性是可重用的、响应性的，并且可以在组件内的任何位置调用。在某些实际情况下，当调用计算属性时，您可能需要调用外部 API 来与该 UI 交互相对应或更改项目中其它位置的数据。执行此功能的东西称为 setter。

以下示例演示了计算设置器：

data() {
    return {
        count: 0
    }
},
computed: {
    myComputedDataProp: {
        // getter
        get() {
            return this.count + 1
        },
        // setter
        set(val) {
            this.count = val - 1
            this.callAnotherApi(this.count)
        },
    },
},
}

默认情况下，计算数据只是一个 getter，这意味着它只会输出表达式的结果。在此示例中，计算出的 myCompulatedDataProp data 属性将在 Vue 组件中输出 1：

get() {
    return this.count + 1
},

然后，在计算属性中使用一个 setter，就可以对数据进行响应式监听，并运行一个回调器即 setter 函数，该回调器包含从获取器返回的值，可以选择在设置器中使用该值。

在本例中，设置器将把数据属性 count 更新为新值（反映在获取器中），然后调用组件中名为 callAnotherApi 的方法。在这里，我们通过传递 count 数据属性来模拟将此信息发送到有用的地方：

set(val) {
    this.count = val - 1 // 为什么需要减去1
    this.callAnotherApi(this.count)
},

在Vue中，计算属性（computed properties）具有 getter 和 setter 方法。getter 方法用于获取计算属性的值，而 setter 方法用于更新计算属性的值。

计算属性的 setter 方法是可选的，只有当你需要对其值进行修改时才需要定义 setter。如果你不提供 setter，那么计算属性的值将只能通过 getter 方法进行读取，而不能进行修改。

要为计算属性定义 setter 方法，你可以在计算属性的定义中提供一个 setter 函数，该函数会在计算属性的值被修改时被调用。以下是一个示例：

// 定义一个计算属性，具有 getter 和 setter
computed: {
  firstName: {
    get() {
      return this._firstName;
    },
    set(newValue) {
      this._firstName = newValue.trim(); // 在设置新值之前修剪空格
      console.log(`First name changed to: ${this._firstName}`);
    }
  }
}

在上面的示例中，我们定义了一个名为 firstName 的计算属性。它具有 getter 和 setter 方法。在 getter 方法中，我们返回 _firstName 的值。在 setter 方法中，我们首先修剪了输入的新值（newValue）的空格，然后将其赋值给 _firstName，并在控制台中打印了一条消息。

你可以通过调用计算属性的 setter 方法来修改其值。例如：

this.firstName = 'John Doe'; // 设置 firstName 的值为 'John Doe'

这将调用 firstName 的 setter 方法，修剪空格并将结果存储在 _firstName 中。同时，还会在控制台中打印一条消息。

在下面的练习中，您将准确了解如何使用计算数据作为 getter 和 setter。

练习 2.02：使用计算属性设置器

在本练习中，您将使用计算属性作为 setter 和 getter，当用户输入触发时，它将输出表达式并设置数据。

要访问本练习的代码文件，请参阅 https://packt.live/2GwYapA 。

打开命令行终端，导航到 Exercise 2.02 文件夹，然后按顺序运行以下命令：
```
> cd Exercise2.02/
> code .
> yarn
> yarn serve
```
转到 https://localhost:8080 。

创建一个输入字段，其中 v-model 值绑定到名为 incrementOne 的计算数据值，在 getter 中返回名为 count 的 Vue 数据变量的值，并在 setter 中设置 count 变量：

<template>
    <div class="container">
        <input type="number" v-model="incrementOne" />
        <h3>Get input: {{ incrementOne }}</h3>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: -1,
        }
    },
    computed: {
        incrementOne: { // 计算属性作为 v-model 引用数据
            // getter
            get() {
                return this.count + 1
            },
            // setter
            set(val) { // val 来自用户输入
                this.count = val - 1
            },
        },
    },
}
</script>

上述代码的输出如下：

Figure 1. Figure 2.3: First steps of a computed setter and getter

接下来，让我们再次使用 setter。我们将把新的 val 参数除以 2，并将其保存到一个名为 divideByTwo 的新数据变量中：

<template>
    <div class="container">
        <input type="number" v-model="incrementOne" />
        <h3>Get input: {{ incrementOne }}</h3>
        <h5>Set division: {{ divideByTwo }}</h5>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: -1,
            divideByTwo: 0,
        }
    },
...
</script>
...

更新 setter 以将 val 除以 2，并将这个新值绑定到 divideByTwo 变量：

set(val) { // val来自get()方法返回值
    this.count = val - 1
    this.divideByTwo = val / 2
},

divideByTwo 值的输出应根据输入字段中输入的值生成结果，如下所示：

Figure 2. Figure 2.4: The outcome of the divideByTwo value

在本练习中，我们了解了如何通过将计算变量绑定到 v-model，使用计算数据在模板中响应性地获取和设置数据。