Nuxt 中 URL 与状态双向绑定指南：从原理到实践

watch([() => pagination.page, () => pagination.size], () => {
  router.push({ query: { page: pagination.page, size: pagination.size } });
});

const { refresh } = useAsyncData(...)
watch(() => route.query, () => {
  refresh()  // 手动刷新
})

watch: [() => pagination.page, () => pagination.size]; // 漏了 searchValue

// 假设 URL 中有 ?tag=Nuxt,Vue
const tags = ref(route.query.tag?.split(",")); // 如果 tag 不存在，会报错

┌─────────────────────────────────────────────────────────────────┐
│                        双向同步闭环                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   用户操作                        浏览器后退/前进/直接修改URL    │
│      │                                   │                      │
│      ▼                                   ▼                      │
│  修改内部状态                    ┌─────────────────┐            │
│  (ref)                          │ route.query 变化 │            │
│      │                          └────────┬────────┘            │
│      ▼                                   │                      │
│  watch(状态) 触发                 watch(route.query) 触发        │
│      │                                   │                      │
│      └─────────────┬─────────────────────┘                      │
│                    ▼                                            │
│            router.push 更新 URL                                 │
│                    │                                            │
│                    ▼                                            │
│         useAsyncData 自动重新获取数据                           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// 1. 从 URL 初始化内部状态
const route = useRoute();
const router = useRouter();

const searchInput = ref(route.query.search?.toString() || "");
const searchOption = ref(Number(route.query.option) || 1);
const page = ref(Number(route.query.page) || 1);
const size = ref(Number(route.query.size) || 10);
const level = ref(route.query.level?.toString() || "");
const viewMode = ref(Number(route.query.viewMode) || 1);
const tags = ref<string[]>([]);

// 解析 URL 中的数组参数（支持逗号分隔或重复键名）
const parseTagsFromQuery = () => {
  const tagParam = route.query.tag;
  tags.value = tagParam
    ? Array.isArray(tagParam)
      ? tagParam
      : tagParam.split(",")
    : [];
};
parseTagsFromQuery();

// 2. Watch 1：URL → 内部状态（处理后退/直接访问）
watch(
  () => route.query,
  (q) => {
    searchInput.value = q.search?.toString() || "";
    searchOption.value = Number(q.option) || 1;
    page.value = Number(q.page) || 1;
    size.value = Number(q.size) || 10;
    level.value = q.level?.toString() || "";
    viewMode.value = Number(q.viewMode) || 1;
    parseTagsFromQuery();
  },
  { immediate: true },
);

// 3. Watch 2：内部状态 → URL（用户操作时同步）
watch([searchInput, searchOption, page, size, level, viewMode, tags], () => {
  const query: Record<string, string> = {};
  if (searchInput.value) query.search = searchInput.value;
  if (searchOption.value !== 1) query.option = String(searchOption.value);
  if (page.value !== 1) query.page = String(page.value);
  if (size.value !== 10) query.size = String(size.value);
  if (level.value) query.level = level.value;
  if (viewMode.value !== 1) query.viewMode = String(viewMode.value);
  if (tags.value.length) query.tag = tags.value.join(",");

  // 避免无意义的重复跳转
  if (JSON.stringify(route.query) !== JSON.stringify(query)) {
    router.push({ query });
  }
});

// 4. 数据获取：useAsyncData 自动刷新
const { data } = useAsyncData(
  "docs",
  async () => {
    // 使用当前状态构建查询
    let query = queryCollection("docs").order("date", "DESC");
    if (searchInput.value) {
      /* ... */
    }
    if (level.value) query = query.where("level", "=", level.value);
    if (tags.value.length) {
      tags.value.forEach((tag) => {
        query = query.where("tags", "LIKE", `%${tag}%`);
      });
    }
    return query
      .skip((page.value - 1) * size.value)
      .limit(size.value)
      .all();
  },
  {
    watch: [searchInput, searchOption, page, size, level, viewMode, tags], // 直接监听 ref
  },
);

import { useRouteQuery } from "@vueuse/router";
const search = useRouteQuery("search", "");
const searchOption = useRouteQuery("option", 1, { transform: Number });
const page = useRouteQuery("page", 1, { transform: Number });
const size = useRouteQuery("size", 10, { transform: Number });

Server Error
Invalid value used as weak map key

<template>
  <TagFilter :is-desktop="isDesktop" ... />
</template>
<script setup>
const { isDesktop } = useResponsive();
</script>

<script setup>
const props = defineProps(["isDesktop"]);
// 内部使用 props.isDesktop，不再调用 useResponsive
</script>

useEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft" && hasPrevPage.value) {
    e.preventDefault();
    page.value -= 1; // page 变化会自动触发 URL 更新和数据刷新
  }
  // ...
});

useSwipe({
  onUp: () => {
    if (hasNextPage.value) page.value += 1;
  },
});