QA: 状态管理的 getter 和 setter 如何使用

[chilingling]

概念

• getter 相当于vue 中的 computed (实际不完全等同，用的是 watchEffect 实现)
  用途：用于响应式计算多种状态组合
• setter 相当于 vue 中的 'watchEffect'
  用途：用于监听状态的变化，并根据状态变化执行对应的逻辑

getter 举例：
我们现在有三个状态变量：

• fullName 全名，全名由 firstName 和 lastName 一起组合而成
• firstName
• lastName

所以 fullName 我们可以这样设置：

解释：

• 设置初始值为空字符串
• 设置 getter 为：

function getter() {
  this.state.fullName = `${this.props.firstName} ${this.props.lastName}`
}

这样子，一旦 firstName 和 lastName 有变化，我们的 fullName 就会自动跟随变化。

对应出码后的高代码：

// 初始状态声明
const state = vue.reactive({
  name: "",
  firstName: "firstName",
  lastName: ""
});

// getter
vue.watchEffect(wrap(function getter() {
  this.state.name = `${this.props.firstName} ${this.props.lastName}`;
}));

setter 举例：

假设现在 lastName 和 firstName 变化之后，我们都需要向上 emit 一个事件。
那么，我们可以在 fullName 的 setter中这么写：

function setter() {
  const [firstName, lastName] = this.state.fullName.split(' ')
  this.emit('update:firstName', firstName)
  this.emit('update:lastName', lastName)
}

对应的出码后的高代码：

vue.watchEffect(wrap(function setter() {
  const [firstName, lastName] = this.state.fullName.split(' ');
  this.emit('update:firstName', firstName);
  this.emit('update:lastName', lastName);
}));