Global Options

We export the setGlobalOptions() method to give you control over some options and avoid repetition in some of the same options.

CLI

E.g., vue-cliopen in new windowviteopen in new window

In the following example, all components that use VueRequest in the current project can read the incoming options. For more configurable global options, please refer to Global Options.

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

// App.tsx
const { data: user } = useRequest(getUser);
const { data: job } = useRequest(getJob, { manual: false }); // Override global options

Configure via useRequestProvider

In addition to using the API to set the global configuration above, you can also perform more refined configuration through the useRequestProvider hooks we exported. As shown below, different configurations can be passed in for different components. The incoming configuration will only affect the child components of this component

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

CDN

If you use the CDN version, you can set the global configuration in the following ways. We exported the setGlobalOptions() method on the instance of VueRequest

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

Tips

Options weight: setGlobalOptions < useRequestProvider < local options

Last Updated: 7/1/2022, 8:28:34 AM
Contributors: John