为何变量无法传递到Tanstack Vue Query的Mutation函数中？

可能的原因及解决方案 #

1. 未正确全局注册Vue Query插件 #

Vue Query v5需要在应用入口处全局注册VueQueryPlugin，否则useMutation可能无法正常工作，导致参数传递异常。检查你的main.js/main.ts文件，确保包含以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import { VueQueryPlugin } from '@tanstack/vue-query'

const app = createApp(App)
app.use(VueQueryPlugin) // 必须注册这一行
app.mount('#app')

2. 依赖安装异常 #

尝试清理依赖重新安装，排除版本冲突或损坏的依赖文件：

rm -rf node_modules package-lock.json
npm install

3. 尝试使用mutateAsync替代mutate #

部分场景下mutate的同步调用可能存在上下文问题，换成异步版本测试：

async function addTodo() {
  await mutateAsync({ id: new Date(), title: 'Do Laundry' })
}

4. 检查组件是否存在语法错误 #

确保<script setup>中没有其他语法错误（比如未声明的变量、导出冲突等），这些问题可能间接影响Vue Query的正常运行。

验证代码 #

如果以上步骤都完成，你的原始代码应该能正常打印传入的newTodo对象。测试时注意打开浏览器控制台，点击按钮后查看日志输出。

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