探寻alova与pinia结合的最佳实践

[Pursuit01]

需要新特性解决什么问题？

我习惯将组件依赖的数据存储在pinia中，然后在setup语法糖中引入store进行使用，但是当请求数据拿到后，还需手动将data,loading等解构出来的结果同步到pinia中以维持数据的一致性，显然这一操作是不够优雅的。

有没有其他好的方案或者是我对alova的打开方式有错误认识呢？

你期望的新特性应该如何呈现？

No response

它对你有多重要？

没有它我就要弃坑了

[JOU-amjs]

问题性的话题我们建议在Discussion中开展

我的理解是，在项目中我们会将请求分为以下两类

1. 全局的请求数据，例如个人数据等初始化数据
2. 局部的请求数据，例如某个页面内、某个组件内的数据

全局的请求数据

全局的请求数据更适合放在pinia里，pinia我的理解是一个全局的状态管理器，这种数据更适合存储全局的状态化数据，哪个组件里需要使用则在哪边引入使用。这种情况，你可以使用alova的method实例直接请求并获得数据并存到pinia中，无需使用use hook。

局部的请求数据

而例如alova的useRequest则更适合在某个组件内使用，就是获取局部的请求数据，它所创建的loading、data等也都是组件级别的，会随着组件销毁而释放掉，这些是不需要放到pinia中的。

所以根据你的需求来使用不同的请求方式会更好些

[wintsa123]

我觉得可以在加个options，pinnia:boolen，version：v1，如果pinnia是true，就自动把请求的数据更新到这个api数据变量，用version控制版本，经常可能会遇到同一个接口多个组件调用，可以通过version避免状态重复。这样看好像有有点违背useRequest的初衷，因为useRequest是组件级别的，会在组件销毁释放 @JOU-amjs

[JOU-amjs]

具体来说，要实现这样的，你可以封装一个中间件来实现这个效果。

// 中间件
const createPiniaSyncMiddleware = options => {
  return async (_, next) => {
    const response = await next();
    options.store[options.key] = response;
  }
}

// 使用
useRequest(apiMethod, {
  middleware: createPiniaSyncMiddleware({
    store: useXStore(),
    key: 'info'
  })
});

其实内部就是自动赋值到了对应的store上面，当然，以下两种方法我认为也是可以的。

使用useRequest

const { onSuccess } = useRequest(apiMethod);
onSuccess(({ data }) => {
  useXStore().info = data;
});

直接在store的action里处理

const useXStore = defineStore('x', {
  state: () => ({
    info: {}
  }),
  actions: {
    async requestInfo() {
      this.info = await apiMethod.send();
    }
  }
});

无论是哪种方案，我个人认为都是一两句代码可以解决的，确实没必要封装。说的不对的地方，你们也可以再发表下见解哦！