Nuxt中useFetch异常：未监听filterParams却触发请求

问题出在你将filterParams这个ref对象直接传入了query参数中。Nuxt的useFetch会深度监听query对象内的所有响应式值，即便你没把它加入watch数组，只要filterParams内部属性发生变化，就会触发请求重新发送。

解决方案1：解构属性单独传递 #

把filterParams中的属性单独解构出来放到query里，只传递需要的字段，这样只有指定的依赖变化才会触发请求：

<script setup>
const page = ref(1);
const pageCount = ref(10);
const search = ref('');

const filterParams = ref({
  role_id: undefined,
});

await useFetch('events', {
  method: 'GET',
  query: {
    q: search,
    role_id: filterParams.value.role_id,
    page: page,
    limit: pageCount,
  },
  watch: [search, pageCount],
  onRequest: (config) => {
    console.log('request was sent');
  },
});
</script>

<template>
  <select v-model="filterParams.role_id">
    <option :value="1">1</option>
    <option :value="2">2</option>
  </select>
</template>

解决方案2：用函数形式指定监听依赖 #

如果你需要保留filterParams的结构，可以将watch设为函数，手动返回要监听的依赖值，避免自动深度监听整个对象：

<script setup>
const page = ref(1);
const pageCount = ref(10);
const search = ref('');

const filterParams = ref({
  role_id: undefined,
});

await useFetch('events', {
  method: 'GET',
  query: {
    q: search,
    filterParams,
    page: page,
    limit: pageCount,
  },
  watch: () => [search.value, pageCount.value],
  onRequest: (config) => {
    console.log('request was sent');
  },
});
</script>

<template>
  <select v-model="filterParams.role_id">
    <option :value="1">1</option>
    <option :value="2">2</option>
  </select>
</template>

当watch为函数时，它只会监听你明确返回的依赖值，修改filterParams.role_id就不会再触发请求了。

内容的提问来源于stack exchange，提问作者rook