15 个 Vue3 全家桶开发的避坑经验( 五 ) _Vue3

addr: 'fujian'
}
},
actions: {
updateState{
this.name = 'hello pingan8787';
this.age = '18';
this.addr = 'xiamen';
}
}
})
使用时：
constchangeName = => {
componentStoreObj.updateState;
}
这三种方式都能更新 Pinia 中 store 的数据状态。
五、Element Plus 1. element-plus 打包时 @charset 警告
项目新安装的 element-plus 在开发阶段都是正常，没有提示任何警告，但是在打包过程中，控制台输出下面警告内容：

文章插图
在官方 issues 中查阅很久：https://github.com/element-plus/element-plus/issues/3219 。
尝试在 vite.config.ts中配置 charset: false，结果也是无效：
// vite.config.ts
exportdefaultdefineConfig({
css: {
preprocessorOptions: {
scss: {
charset: false// 无效
}
}
}
})
最后在官方的 issues 中找到处理方法：
// vite.config.ts
// https://blog.csdn.NET/u010059669/article/details/121808645
css: {
postcss: {
plugins: [
// 移除打包element时的@charset警告
{
postcssPlugin: 'internal:charset-removal',
AtRule: {
charset: ( atRule) => {
if(atRule.name === 'charset') {
atRule.remove;
}
}
}
}
],
},
}
2. 中文语言包配置

文档地址：https://element-plus.gitee.io/zh-CN/guide/i18n.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

默认 elemnt-plus 的组件是英文状态：

文章插图
我们可以通过引入中文语言包，并添加到 ElementPlus 配置中来切换成中文：
// main.ts
// ... 省略其他
importElementPlus from'element-plus';
import'element-plus/dist/index.css';
importlocale from'element-plus/lib/locale/lang/zh-cn'; // element-plus 中文语言包
app.use(ElementPlus, { locale }); // 配置中文语言包
这时候就能看到 ElementPlus 里面组件的文本变成中文了。

文章插图
总结
以上是我最近从入门到实战 Vue3 全家桶的 3 个项目后总结避坑经验，其实很多都是文档中有介绍的，只是刚开始不熟悉。也希望大伙多看看文档咯~
Vue3 -setup 模式确实越写越香。
本文内容如果有问题，欢迎大家一起评论讨论。
--- EOF ---

【15 个 Vue3 全家桶开发的避坑经验】