升级到 Vant 4 踩坑记:Vue 3 项目中 useMessage Hook 全部失效,Toast 报错,如何破局?

记录在项目中将 Vant 从 3 升级到 4,结果遇到了一个大坑:我二次封装的 Toast 函数式调用全部失效了,项目中所有的提示消息都不能用了。这可把我急坏了!

Vant 3 的使用方式

在 Vant 3 中,我们直接使用函数调用 Toast() 来显示消息,非常方便。然而,升级到 Vant 4 后,发现这种方式不再可行了。

尝试在 main.ts 中按需引入

我首先尝试在 main.ts 中按需引入 Toast,希望能解决问题:

DIFF 复制代码
import vant, { Toast } from 'vant';
import App from './App.vue';
import 'vant/lib/index.css';

const app = createApp(App);

app.use(vant);
+    app.use(Toast);

app.mount('#app');

然而,这样引入的 Toast 是一个组件,而不是我需要的函数。这让我更加着急了。

查阅文档和 Google

我开始疯狂地查阅文档和 Google,试图找到解决方案。甚至还上了 GitHub,找到了一些相关的讨论,但都没有解决我的问题。

终于找到解决方案 但不是我想要的

功夫不负有心人,我终于在 Vant 3 升级到 Vant 4 的更新文档中找到了有用的信息。文档中提到,Vant 4 中 Toast 的调用方式进行了调整:在里面找到了有用的提示,文档中说Toast 调用方式调整,Vant 4 中,Toast 组件的调用方式也进行了调整,也就是语法变了,包括 Toast 上挂载的其他方法也进行了重命名,

JAVASCRIPT 复制代码
// Vant 3
Toast(); // 函数调用

// Vant 4
showToast(); // 函数调用
Toast; // 组件对象

寻找到兼容方案

接着往下看文档,发现一个兼容方案,兼容方案说为了便于代码迁移,提供了兼容方案,可以使用 @vant/compat 中导出的 Toast 对象来兼容原有代码。

安装兼容包

JAVASCRIPT 复制代码
# 通过 pnpm 安装
pnpm add vant@^4 @vant/compat@^1

修改引用路径

安装后,将引用路径从 vant 改为 vant/compat

DIFF 复制代码
- import { Toast } from 'vant';
+ import { Toast } from '@vant/compat';

然而,新的问题出现了:TypeScript 报错,找不到模块和类型声明。重启项目也无济于事。

解决 TypeScript 报错

更新 tsconfig.json

tsconfig.json 中添加以下配置,确保 TypeScript 能正确处理 .vue.ts 文件:

JSON 复制代码
{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

成功解决

回到页面,看到识别成功的提示,所有属性都加载成功了!

最后测试

在页面中测试,终于成功了! 避免了大量的修改~

JAVASCRIPT 复制代码
<template>
  <div>
    <van-button @click="handleSuccess('配置成功了')" type="primary">提示内容</van-button>
  </div>
</template>

<script setup lang="ts">
import { Toast } from '@vant/compat';

/* 成功 */
function handleSuccess(message: string, cbFn?: () => void) {
  Toast({
    type: 'success',
    message,
    duration: 2000,
    onClose: cbFn,
  });
}
</script>
<style scoped></style>

结语

这次升级 Vant 4 的经历真是让我心力交瘁,但也让我学到了很多。每次遇到问题时,保持冷静、耐心查阅文档和社区资源,最终总能找到解决方案。如果你也在升级过程中遇到类似问题,希望这篇文章能帮到你。加油,编程之路上,我们一起前行!

相关推荐
我想说一句8 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
lichenyang45319 小时前
React移动端开发项目优化
前端·react.js·前端框架
当牛作馬1 天前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
Codebee1 天前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
我命由我123451 天前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
扶我起来还能学_1 天前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
沐森1 天前
桌面右键功能开发
前端框架·操作系统
默默地离开1 天前
React自定义 Hooks 不用死磕,轻松拿捏也能站上技术金字塔尖!
前端·react.js·前端框架
知识分享小能手2 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
前端小趴菜052 天前
react状态管理库 - zustand
前端·react.js·前端框架