关于Vue 3 reactive中定义异步方法是否为反模式的咨询

这种写法不算严格的反模式，但存在不少值得注意的问题，是否合适取决于你的项目场景：

存在的问题 #

• 不必要的响应式包裹：Vue的reactive会把对象内的所有属性（包括方法）都转化为响应式依赖，但异步方法本身不需要被追踪依赖，这会造成无意义的性能开销（虽然通常影响很小，但不够优雅）。
• this指向风险：如果把方法解构出来单独调用（比如const { loadItems } = store; loadItems()），this会丢失对原reactive对象的绑定，导致无法正确更新状态。
• 职责混淆：reactive对象的核心作用是存放响应式状态数据，把异步请求这类业务逻辑和状态混在一起，违背了关注点分离的原则，项目变大后会难以维护和测试。

可以使用的场景 #

如果是小型项目、简单的局部状态管理场景，这种写法快速直接，能省掉额外的代码结构，资深开发者可能是为了快速实现功能才这么写，不会有太大问题。

更优的替代方案 #

1. 状态与方法分离 #

用reactive只存储状态，业务方法单独定义，通过闭包直接访问状态：

const storeState = reactive({
  items: [],
  currentItem: null
});

async function loadItems() {
  const res = await fetch('/api/items');
  storeState.items = await res.json();
}

async function loadSingleItem(id) {
  const res = await fetch(`/api/items/${id}`);
  storeState.currentItem = await res.json();
}

2. 使用官方状态管理库 #

中大型项目推荐用Pinia（Vue官方推荐），它天然将状态（state）和异步操作（action）分离，结构清晰，还支持devtools调试、模块化、持久化等功能，完全规避这类问题。

3. 保留写法但规避this问题 #

如果一定要把方法放在reactive对象里，调用时不要解构，或者用toRefs包装后调用：

const store = reactive({
  items: [],
  async loadItems() {
    const res = await fetch('/api/items');
    this.items = await res.json();
  }
});

// 直接调用，不要解构
store.loadItems();

// 或者用toRefs处理后调用
const { loadItems } = toRefs(store);
loadItems.value(); // 此时this仍指向原store对象

内容的提问来源于stack exchange，提问作者Adrian