吐槽!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);
// 这样就恢复了正常

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

小踩一坑~记录一下~

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

Comments
登录后评论
Sign In
·

如果是使用vite2作为打包工具的话,有可能是开发和生成使用的打包工具不同导致的