切换仓库ID时Query Key数组未更新致useQuery数据未刷新求助

问题原因 #

你直接使用userStore.selectedWarehouse作为Query Key的一部分，但这个值并非响应式的——组件初始化后不会自动监听它的变化，所以仓库ID切换时，Query Key数组没有更新，Vue Query也就不会触发新的查询。

解决方案 #

有两种简单方式让Query Key响应仓库ID的变化：

方式一：用storeToRefs获取响应式的仓库ID

从Pinia导入storeToRefs，解构出响应式的selectedWarehouse Ref对象，直接放入Query Key数组：

import { useQuery } from '@tanstack/vue-query'
import { storeToRefs } from 'pinia' // 新增导入

const fetchTotalSellers = async warehouseId => {
  const res = await axios.get('/analytics/getTotalSellers', {
    params: {
      warehouseId,
    },
  })
  return res.data
}

const userStore = useUserStore()
const { selectedWarehouse } = storeToRefs(userStore) // 解构响应式Ref

const { data } = useQuery(
  ['analytics', selectedWarehouse], // 传入Ref，Vue Query会监听变化
  () => fetchTotalSellers(selectedWarehouse.value), // 用.value获取当前最新值
  {
    refetchOnWindowFocus: false,
    onSuccess: data => {
      console.log('data', data)
    },
  },
)

方式二：结合Pinia Getter与computed

利用你已定义的getSelectedWarehouse Getter，用computed包裹它保持响应式：

import { useQuery } from '@tanstack/vue-query'
import { computed } from 'vue' // 新增computed导入

const fetchTotalSellers = async warehouseId => {
  const res = await axios.get('/analytics/getTotalSellers', {
    params: {
      warehouseId,
    },
  })
  return res.data
}

const userStore = useUserStore()
const selectedWarehouse = computed(() => userStore.getSelectedWarehouse) // 用computed包裹Getter

const { data } = useQuery(
  ['analytics', selectedWarehouse], // 传入computed对象，监听变化
  () => fetchTotalSellers(selectedWarehouse.value),
  {
    refetchOnWindowFocus: false,
    onSuccess: data => {
      console.log('data', data)
    },
  },
)

关键说明 #

• Vue Query会自动监听Query Key数组中的响应式依赖（Ref或Computed对象），当依赖变化时，会自动取消旧查询并发起新查询。
• 查询函数中必须用selectedWarehouse.value获取当前最新值，避免闭包捕获旧值导致查询参数错误。

内容的提问来源于stack exchange，提问作者Jamal Id Aissa