Nuxt3中useRouter全局筛选变量被覆盖问题及最佳实践咨询

问题根源 #

你的代码存在两个核心问题导致筛选状态被覆盖：

1. filterQuery 是组件内的普通变量，组件重新渲染（比如路由切换、页面刷新）时会被重置为空对象
2. 初始化时没有从当前路由的query中读取已有的筛选值，每次操作都基于空对象开始，覆盖之前的筛选数据

解决方案：双向同步路由与筛选状态 #

要实现筛选状态和路由参数的持久化同步，需要做到：

• 用响应式变量存储筛选状态
• 初始化时从路由query解析已有值
• 监听路由变化，自动同步状态
• 更新筛选状态后同步到路由

基础组件内实现方案 #

const router = useRouter();
const route = useRoute();

// 用reactive创建响应式的筛选状态，从路由query初始化
const filterQuery = reactive({});
Object.entries(route.query).forEach(([key, value]) => {
  if (typeof value === 'string') {
    filterQuery[key] = new Set(value.split(','));
  }
});

// 处理复选框点击事件
const filterValues = (event, option) => {
  const { key, slug } = option;
  
  // 确保当前筛选key对应的Set存在
  if (!filterQuery[key]) {
    filterQuery[key] = new Set();
  }

  if (event.target.checked) {
    filterQuery[key].add(slug);
  } else {
    filterQuery[key].delete(slug);
    // 筛选值为空时移除该key，避免路由出现空参数
    if (filterQuery[key].size === 0) {
      delete filterQuery[key];
    }
  }

  // 转换为路由需要的字符串格式
  const newQuery = Object.fromEntries(
    Object.entries(filterQuery).map(([k, v]) => [k, Array.from(v).join(',')])
  );

  // 用replace替换当前路由，避免历史记录过多（如需保留历史可改用push）
  router.replace({ query: newQuery });
};

// 监听路由变化，同步更新筛选状态（比如用户手动修改URL）
watch(
  () => route.query,
  (newQuery) => {
    // 清空现有状态
    Object.keys(filterQuery).forEach(key => delete filterQuery[key]);
    // 从新路由参数解析筛选值
    Object.entries(newQuery).forEach(([key, value]) => {
      if (typeof value === 'string') {
        filterQuery[key] = new Set(value.split(','));
      }
    });
  },
  { immediate: true, deep: true }
);

全局多组件共享方案（Pinia） #

如果多个组件需要共用筛选状态，推荐用Pinia管理，避免状态分散：

1. 创建Pinia Store：

// stores/filters.js
import { defineStore } from 'pinia';
import { useRouter, useRoute } from 'vue-router';
import { reactive, watch } from 'vue';

export const useFiltersStore = defineStore('filters', () => {
  const router = useRouter();
  const route = useRoute();
  const filterQuery = reactive({});

  // 初始化筛选状态
  const initFilters = () => {
    Object.keys(filterQuery).forEach(key => delete filterQuery[key]);
    Object.entries(route.query).forEach(([key, value]) => {
      if (typeof value === 'string') {
        filterQuery[key] = new Set(value.split(','));
      }
    });
  };

  // 更新单个筛选值
  const updateFilter = (checked, key, slug) => {
    if (!filterQuery[key]) {
      filterQuery[key] = new Set();
    }

    checked ? filterQuery[key].add(slug) : filterQuery[key].delete(slug);
    
    // 清理空筛选项
    if (filterQuery[key]?.size === 0) {
      delete filterQuery[key];
    }

    // 同步到路由
    const newQuery = Object.fromEntries(
      Object.entries(filterQuery).map(([k, v]) => [k, Array.from(v).join(',')])
    );
    router.replace({ query: newQuery });
  };

  // 监听路由变化同步状态
  watch(() => route.query, initFilters, { immediate: true, deep: true });

  return { filterQuery, updateFilter };
});

2. 在组件中使用：

import { useFiltersStore } from '~/stores/filters';

const filtersStore = useFiltersStore();

const filterValues = (event, option) => {
  filtersStore.updateFilter(event.target.checked, option.key, option.slug);
};

关键优化点 #

• 响应式状态：用reactive保证筛选状态能被Vue跟踪，避免组件渲染丢失状态
• 路由双向同步：初始化和监听路由变化，确保状态与URL参数一致
• 清理空参数：筛选值为空时删除对应路由key，保持URL整洁
• 历史记录控制：用router.replace替代push，减少不必要的历史条目（按需调整）

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