Dependency Refresh

If your interface needs to dynamically listen for changes in certain values and send requests accordingly, you can handle it like this:

import { ref, watch, reactive } from 'vue';
import { useRequest } from 'vue-request';

const someRef = ref(0);
const someReactive = reactive({
  count: 0,
});
const { data, refresh } = useRequest(getUser);

watch([someRef, () => someReactive.count], refresh);

// ...

However, we also provide refreshDeps. In fact, using refreshDeps has no difference from directly writing a watch listener, so it can be understood as a syntax sugar for the example above.

Tips

Switching the radio below will trigger a request.

refreshDepsAction

Of course, we also provide refreshDepsAction to customize the behavior of refreshing dependencies. When the contents of refreshDeps change, refreshDepsAction will be called.

warning

When manual=true, refreshDepsAction will also be triggered. This behavior is inconsistent with the default behavior of refreshDeps.

import { ref, watch, reactive } from 'vue';
import { useRequest } from 'vue-request';

const someRef = ref(0);

const { data, run } = useRequest(getUser, {
  refreshDeps: someRef,
  refreshDepsAction: () => {
    run(1);
  },
});