Vue2/Nuxt2旧项目中如何在非setup周期调用invalidateQueries？

你不用把整个组件都改成setup写法，有两种简单的适配方式解决这个问题：

方式一：在setup中导出queryClient给methods使用 #

如果你的edit.vue已经用了composition-api的defineComponent包裹，直接在setup里获取queryClient并返回，就能在methods里通过this访问：

<script>
import { useQueryClient } from 'vue-query'
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  setup() {
    // 获取queryClient实例
    const queryClient = useQueryClient()
    // 返回给组件实例，供methods调用
    return { queryClient }
  },
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    async submit() {
      // 执行PUT请求
      await this.$axios.put('/your-api-url', this.formData)
      // 失效后台页面的查询缓存，替换成你后台页面useQuery的queryKey
      this.queryClient.invalidateQueries('admin-page-query-key')
    }
  }
})
</script>

方式二：全局挂载queryClient到Vue原型 #

如果你的组件还是传统选项式写法，不想碰setup，可以在vue-query的插件里把queryClient挂载到Vue原型上：

// plugins/vue-query.js（Nuxt项目的插件文件）
import Vue from 'vue'
import { VueQueryPlugin, QueryClient } from 'vue-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30000
    }
  }
})

// 注册vue-query插件
Vue.use(VueQueryPlugin, { queryClient })
// 把queryClient挂载到Vue原型
Vue.prototype.$queryClient = queryClient

之后在edit.vue的methods里直接调用即可：

<script>
export default {
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    async submit() {
      await this.$axios.put('/your-api-url', this.formData)
      // 直接通过this.$queryClient调用失效方法
      this.$queryClient.invalidateQueries('admin-page-query-key')
    }
  }
}
</script>

关键注意点 #

• 调用invalidateQueries时，传入的参数必须和后台页面useQuery的第一个参数（queryKey）完全一致，这样才能精准失效对应的缓存。
• 两种方案都不需要大规模重构现有代码，完全适配你当前的版本栈。

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