VueJS/Pinia 中 computed 脏数据警告：如何解决？

vue.js

2024-03-20 14:03:54

VueJS/Pinia 中 computed 脏数据警告：深入探究和解决方案

作为一名经验丰富的程序员和技术作家，我来分享如何消除 VueJS/Pinia 中 computed 脏数据的警告。

根源：computed 属性的自身依赖项突变

computed 属性是基于响应式依赖项的函数。当依赖项更改时，computed 属性将重新计算并更新其值。然而，如果 computed 属性在其 getter 中突变其依赖项，就会触发脏数据警告。

解决方法：避免在 computed getter 中进行突变

为避免脏数据警告，请遵循以下最佳实践：

1. 使用 Pinia 的 $patch 方法

Pinia 的 $patch 方法允许你以响应方式更新存储状态。

2. 将 msg.snackBar 声明为 Pinia 状态

使用 useStore 钩子访问 Pinia 状态。

其他最佳实践

使用响应式数据。
仅使用 computed 属性衍生数据。
使用 watch 或 effect 钩子进行复杂操作。
保持代码简洁和组织。

深入剖析：

1. 脏数据示例

clickButton() {
  if (this.textInput != '') {
    this.msg.snackBar = this.textInput; // 突变依赖项
  } else {
    this.msg.snackBar = 'Please enter text...';
  }
}

2. 使用 $patch 方法解决

clickButton() {
  if (this.textInput != '') {
    this.msg.$patch({ snackBar: this.textInput });
  } else {
    this.msg.$patch({ snackBar: 'Please enter text...' });
  }
}

3. 声明为 Pinia 状态解决

const store = useStore();
clickButton() {
  if (this.textInput != '') {
    store.msg.snackBar = this.textInput;
  } else {
    store.msg.snackBar = 'Please enter text...';
  }
}