Dependency Refresh

Suppose your interface needs to dynamically monitor changes in some values and make a request. In that case, 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);

// ...









 


But we also provide refreshDeps. In fact, there is no difference between the effect of using refreshDeps and writing watch directly, so it can be understood that refreshDeps is syntactic sugar for the above example.

Tips

Switching the radio below will trigger the request.

refreshDepsAction

we also provide refreshDepsAction to customize the behavior of dependent refresh. When the content of refreshDeps changes, refreshDepsAction will be called.

warning

When manual=true, refreshDepsAction will also be triggered. This 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);
  },
});
Last Updated: 7/1/2022, 8:28:34 AM
Contributors: John