想问一下nuxt3上能放心使用usehook吗，比如usePagination

[wintsa123]

What problem does the new feature need to solve?

最近在学习nuxt3，alova的分页管理确实很优秀，我想引用，但又怕nuxt3和alova的兼容问题。我如果想使用分页管理，我应该注意点什么减少错误？

How should the new features you expect looks like?

No response

How important is it to you?

better to have

[JOU-amjs]

可以使用全部功能，但它只会在浏览器端有效，也就是说不会在服务端发送请求获取数据。

小小建议一下，为了便于管理问题和issue，问题类的我们可以放在discussion中来提问哦

[wintsa123]

好的

[wintsa123]

有nuxt3的安装教学吗，装完配置好实例后，打开直接报错

[wintsa123]

@JOU-amjs

Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables.                                                                                                                                               

我尝试封装了一下，客户端是正常获取数据，但刷新时就报错。

import { createAlova } from 'alova';
import GlobalFetch from 'alova/GlobalFetch';
import VueHook from 'alova/vue';

export const alovaInstance = ()=>{
  const config = useRuntimeConfig();

  return createAlova({
  baseURL: config.public.apiBase,
  statesHook: VueHook,
  requestAdapter: GlobalFetch(),
  timeout: 5000,
  responded: {
    // 请求成功的拦截器
    // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
    onSuccess: async (response, method) => {
      if (response.status >= 400) {
        throw new Error(response.statusText);
      }
      const json = await response.json();
      if (json.code !== 200) {
        // 抛出错误或返回reject状态的Promise实例时，此请求将抛出错误
        throw new Error(json.message);
      }

      // 解析的响应数据将传给method实例的transformData钩子函数，这些函数将在后续讲解
      return json.data;
    },

    // 请求失败的拦截器
    // 请求错误时将会进入该拦截器。
    // 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
    onError: (err, method) => {
      alert(err.message);
    }
  }
})}
export const todoListGetter = alovaInstance().Get('/article/list', {
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  });

[wintsa123]

@JOU-amjs 我想调用nuxt3的useRuntimeConfig()，里面保存了全局变量的baseurl，但这个方法一写在alova的二次封装就报错。。

[JOU-amjs]

请先根据报错内容查阅nuxt的问题原因，独立的探索和思考可以让你不断精进哦，加油。👍

[wintsa123]

早看了，nuxt上说是useRuntimeConfig()只能用在setup，或者说setup里面调用的方法时才能访问useRuntimeConfig()。二次封装createAlova的话只能把createAlova和请求实例方法一同写在方法内部才能调用useRuntimeConfig()，也就是在setup发送请求时才开始使用useRuntimeConfig()这样的话是能用，但每次发送请求就相当于执行了一次新的createAlova实例创建,我不知道这种新的实例会不会影响底层，比如key之类的。封装起来就像discussions里面另一个nuxt3封装发的图一样。
https://user-images.githubusercontent.com/33616855/262258092-8625b0bf-3674-49b3-b665-d9728c862e39.png

我并不太希望这样写。

[wintsa123]

其实报错原因就在于useRuntimeConfig()在setup时才可以访问，但二次封装createAlova实例在setup前创建。当然我还可以创建一个新的ts文件来保存baseurl变量，创建实例时导入，但我并不太希望通过这种方式来实现，

[wintsa123]

export const alovaInstance = createAlova({
baseURL: useRuntimeConfig().public.apiBase,

[JOU-amjs]

多个alova对象是没问题的，但建议你相同配置一个对象就可以了。你可以先创建一个alova对象，然后在可以获取useRuntimeConfig的地方通过alovaInstance.options.baseURL动态修改baseURL