全局配置

我们通过导出 setGlobalOptions() 方法，来给你控制一些配置，避免重复繁琐地填入一些相同的配置

基于构建工具

如：vue-cli在新窗口打开、vite在新窗口打开

在下面的例子 🌰  中，当前项目里所有使用到 VueRequest 的组件都能读取到传入的配置。更多可配置的全局属性，请参考 全局选项

// main.ts
import { setGlobalOptions } from 'vue-request';
// ...
setGlobalOptions({
  manual: true,
  // ...
});

// App.tsx
const { data: user } = useRequest(getUser);
const { data: job } = useRequest(getJob, { manual: false }); // 覆盖全局配置

使用 useRequestProvider 注入配置

除了上述使用 API 的方式去设置全局配置以外，你还可以通过我们导出的 useRequestProvider hooks，进行更加精细化的配置。如下所示，可以为不同的组件传入不同的配置。传入的配置只会影响到该组件的子组件

import { defineComponent } from 'vue';
import { useRequestProvider } from 'vue-request';
// ...
export default defineComponent({
  name: 'App',
  setup() {
    useRequestProvider({
      manual: true,
      // ...
    });
    return {};
  },
});

基于 CDN

如果你通过 CDN 来使用 VueRequest，你可以通过以下方式来设置全局配置。我们在 VueRequest 的实例上导出了 setGlobalOptions() 方法

<!-- ... -->
<script src="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>
<script>
  VueRequest.setGlobalOptions({
    manual: true,
    // ...
  });
</script>

提示

配置权重：setGlobalOptions < useRequestProvider < 局部 options