开发踩坑学习记录｜若依Vue3\+Pinia\+Vite\+FBX模型 实战报错复盘
开发踩坑学习记录｜若依Vue3+Pinia+Vite+FBX模型 实战报错复盘
开发环境：Vite + Vue3 script-setup + Pinia + ElementPlus + 若依Cloud-Vue3
一、若依Vue2 / Vue3 语法适配（项目首个高频报错）
1. 核心报错信息
Cannot read properties of undefined (reading '$tab')
报错根源：Vue3 script-setup 组合式语法无this实例，直接照搬Vue2的this.$xxx全局调用写法，直接报错。
2. 全局内置方法写法对照表
若依框架内置$tab/$modal/$auth/$cache/$download全局工具，Vue2、Vue3写法完全不同：
| 全局工具对象 | Vue2 选项式写法 | Vue3 script-setup写法 |
|---|---|---|
| $tab 页签管理 | this.$tab.xxx | proxy.$tab.xxx |
| $modal 弹窗提示 | this.$modal.xxx | proxy.$modal.xxx |
| $auth 权限校验 | this.$auth.xxx | proxy.$auth.xxx |
| $cache缓存 / $download文件下载 | this.$cache.xxx | proxy.$cache.xxx |
3. Vue3全局代理固定通用代码
所有页面顶部引入，声明一次即可全局使用，无需重复编写：
<script setup> import { getCurrentInstance } from 'vue' // 获取全局代理实例，替代Vue2的this const { proxy } = getCurrentInstance() // 常用示例：刷新当前页签、弹窗提示 proxy.$tab.refreshPage() proxy.$modal.msgSuccess('操作成功') </script>二、Pinia状态管理报错解决
1. 异常现象
控制台持续打印："setting" store installed 🆕、"app" store installed 🆕，页面接口重复请求、查询按钮点击多次重复执行。
2. 报错根本原因