吐槽！Vue3 + Pinia 踩坑！

小弟在用 Vue3 + Pinia 做一个项目，开发阶段一切顺利，开开心心打包放到 tcb 静态托管上，链接打开查看，一切正常，直到点击登录按钮时，啥反应没有!!!

预期应该使用 Element-plus Form组件的进行格式校验，一番折腾发现是 Vue3 + Pinia 在开发时和部署运行时的行为不一致导致的。

上代码：

Pinia: store.js

const loginFormRef = ref<FormInstance>(); // pinia 管理一个element-plus表单的 ref 引用
return { loginFormRef } // 导出名为 loginStore

Vue3: login.vue

// setup 函数内
import { FormInstance } from 'element-plus';
import appStore from 'pinia.ts';
const { loginFormRef } = appStore.loginStore;

const handleLoginClick = (ins: FormInstance | undefined) => {
    console.log(ins); // 本地：Proxy；打包部署：undfined
    ins?.validate(valid => {
        ...
    })
}

<!-- template -->
<el-form ref="loginFormRef"  >
  <el-button @click="handleLoginClick(loginFormRef)">登录</el-button>
</el-form>

本地开发时，ref 变量是一个代理对象，这是预期表现。但在打包部署后却变成了 undefined。

上面的代码其实并不符合 Pinia 的规范，loginFormRef 是一个经过ref函数处理的代理对象，在引用时应该经过 storeToRefs 函数处理：

import { storeToRefs } from 'pinia';
const { loginFormRef } = storeToRefs(appStore.loginStore);
// 这样就恢复了正常

但为什么明明不符合规范，开发时却可以正常使用，而一打包部署就不行了呢！！

小踩一坑~记录一下~

如果大家还知道什么坑欢迎评论交流，让小弟少踩点吧~