【Vue3入门】Pinia 状态管理 和 ElementPlus组件库

欢迎来到我的CSDN博客Optimistic _ chen✨一名热爱技术与分享的全栈开发者在这里记录成长专注分享编程技术与实战经验助力你的技术成长之路与你共同进步我的专栏推荐专栏内容特色适合人群C语言从入门到精通系统讲解基础语法、指针、内存管理、项目实战零基础新手、考研党、复习Java基础语法系统解释了基础语法、类与对象、继承Java初学者Java核心技术面向对象、集合框架、多线程、网络编程、新特性解析有一定语法基础的开发者Java EE 进阶实战Servlet、JSP、SpringBoot、MyBatis、项目案例拆解想快速入门Java Web开发的同学Java数据结构与算法图解数据结构、LeetCode刷题解析、大厂面试算法题面试备战、算法爱好者、计算机专业学生Redis系列从数据类型到核心特性解析项目必备我的承诺✅ 文章配套代码每篇技术文章都提供完整的可运行代码示例✅ 持续更新专栏内容定期更新紧跟技术趋势✅ 答疑交流欢迎在文章评论区留言讨论我会及时回复支持互粉 关注我解锁更多技术干货⏳ 每天进步一点点未来惊艳所有人✍️ 持续更新中记得⭐收藏关注⭐不迷路 ✨ 标签:#技术博客 #编程学习 #Java #C语言 #算法 #程序员文章目录前言什么是pinia使用Pinia记得安装Pinia定义Pinia Store仓库使用仓库ElementPlus组件库准备ElementPlus组件库ElementPlus的常用组件Form表单组件el-form标签el-form-item标签下拉列表标签日期时间选择标签复选框标签表单校验完结撒花前言【Vue入门】scoped与组件通信这篇博客简单说明了使用Pinia实现组件通信的方法。今天我们将深入探讨如何利用Pinia来管理组件间的通信。什么是pinia首先Pinia是一个状态管理工具Vue的专属状态管理库允许跨组件或页面共享状态所以它的功能不止组件通信。Pinia是一个非常强大的工具程序组件多意味着数据多它保证不同组件数据保持同步同时数据的修改都是可追踪的。比如一个仓库中有20件衣服A卖出去8件A认为仓库中还有12件B卖出去12件B认为仓库中还有8件实际上仓库中已经没有衣服了。A和B因为没有保持数据同步导致仓库数量出现差错店长查看记录谁卖了多少这就是数据的修改是可追踪的。Pinia中需要存储的是多个组件都需要的数据共享数据某给组件的私有数据依旧存储在组件内部因为它别的组件不需要这些数据使用Pinia准备三个组件要求三个组共享数据数据同步记得安装Pinianpm install piniamain.js中创建pinia实例并注册import{createPinia}frompinia//创建实例constpiniacreatePinia()//注册实例app.use(pinia)定义Pinia Store仓库在src/store/store.js中定义仓库用来管理共享的数据import{defineStore}frompinia//命名defineStore的返回值exportconstuseXxxStoredefineStore(仓库名称,Setup函数或Option对象)defineStore中第一个参数是仓库名称也是唯一ID Pinia 将⽤它来连接 store 和 devtoolsimport{defineStore}frompiniaimport{ref,computed}fromvue//定义stock的store并导出exportconstuseStockStoredefineStore(stock,(){//初始化数据conststockref(20)//增加constaddStock(){stock.value;}//减少constsubStock(){stock.value--;}return{stock,addStock,subStock}})使用仓库在根目录下导入要使用的数据仓库App.vuetemplatediv idapph1Pinia 共享数据示例/h1DisplayCounter/IncrementButton/DecrementButton//div/templatescript setupimportDisplayCounterfrom./components/DisplayCounter.vueimportIncrementButtonfrom./components/IncrementButton.vueimportDecrementButtonfrom./components/DecrementButton.vue/scriptstyle#app{font-family:Avenir,Helvetica,Arial,sans-serif;text-align:center;margin-top:2rem;}/styleAdd.vue增加计数templatedivclasscomponent-bh2组件B-增加计数/h2button clickcounterStore.increment()1/button/div/templatescript setupimport{useCounterStore}from/store/counterconstcounterStoreuseCounterStore()/scriptstyle scoped.component-b{border:1px solid #ccc;padding:1rem;margin:1rem;border-radius:8px;}/styleSub.vue减少计数templatedivclasscomponent-ch2组件C-减少计数/h2button clickcounterStore.decrement()-1/button/div/templatescript setupimport{useCounterStore}from/store/counterconstcounterStoreuseCounterStore()/scriptstyle scoped.component-c{border:1px solid #ccc;padding:1rem;margin:1rem;border-radius:8px;}/style显示计数templatedivclasscomponent-ah2组件A-显示计数/h2p当前计数{{counterStore.stock}}/p/div/templatescript setupimport{useCounterStore}from/store/counterconstcounterStoreuseCounterStore()/scriptstyle scoped.component-a{border:1px solid #ccc;padding:1rem;margin:1rem;border-radius:8px;}/style上述代码实现了三个组件之间共享数据无论是1还是-1在显示计数组件都能同步展示。ElementPlus组件库ElementPlus组件库是基于Vue3面向开发者的组件库提供了丰富的PC组件,有效地降低了开发难度我们之前的代码都是自己设计组件自己组装完成任务现在可以直接使用ElementPlus组件库中的组件更加美观并且节省时间。使用ElementPlus组件最重要的是要学会掌握组件的使用方法和文档的阅读文档会教会我们如何使用并且举一反三。准备ElementPlus组件库安装ElementPlusnpm i element-plus引入ElementPlus组件包//导入ElementPlus组件importElementPlusfromelement-plus//导入组件样式importelement-plus/dist/index.css//全局注册app.use(ElementPlus)ElementPlus的常用组件Form表单组件表单包含输入框、单选框、多选框等用户输入组件。我们使用官方提供的实例来展示即可//公共部分的JS代码script langtssetupimport{reactive}fromvue// 表单对象constformreactive({name:,region:,date1:,date2:,delivery:false,type:[],resource:,desc:,})//提交constonSubmit(){console.log(submit!)}/scriptel-form标签在每一个 form 组件中你需要一个 form-item 字段作为输入项的容器用于获取值与验证值。template!--model:表单数据对象 label-width:标签的宽度style:行内样式--el-form:modelformlabel-widthautostylemax-width: 600px............/el-form/templateel-form-item标签每一个el-form-item标签都在el-form标签中包裹一个el-form-item标签就是一个字段。el-form-item labelActivity name!--v-model双向绑定收集表单数据--el-input v-modelform.name//el-form-item下拉列表标签el-form-item labelActivity zone!--下拉列表placeholder占位提示文本--el-select v-modelform.regionplaceholderplease select your zone!--选项label:展示的文本 value同步的数据--el-option labelZone onevalueshanghai/el-option labelZone twovaluebeijing//el-select/el-form-item日期时间选择标签el-form-item labelActivity time!--列 span:占据的宽度份数一行24份--el-col:span11!--日期选择器--el-date-picker v-modelform.date1typedateplaceholderPick a datestylewidth: 100%//el-colel-col:span2classtext-centerspanclasstext-gray-500-/span/el-colel-col:span11!--时间选择器--el-time-picker v-modelform.date2placeholderPick a timestylewidth: 100%//el-col/el-form-item复选框标签el-form-item labelActivity typeel-checkbox-group v-modelform.type!--四个选择框--el-checkbox valueOnline activitiesnametypeOnline activities/el-checkboxel-checkbox valuePromotion activitiesnametypePromotion activities/el-checkboxel-checkbox valueOffline activitiesnametypeOffline activities/el-checkboxel-checkbox valueSimple brand exposurenametypeSimple brand exposure/el-checkbox/el-checkbox-group/el-form-item表单校验Form组件提供了表单验证的功能,只需为rules属性传⼊约定的验证规则并将form-item的prop属性设置为需要验证的特殊键值即可。每个表单的功能校验的规则都不同这是单个组件校验construles{name:[{required:true,message:请输入用户名,trigger:blur},{min:3,max:5,message:输入长度必须在3-5之间}],count:[{required:true,message:请选择数量,trigger:change}],}change 和 blur 是前端表单验证或事件监听中常见的两种触发器它们的核心区别在于触发时机和触发条件。blur只要用户离开失去焦点输入框就会触发。change只有当用户离开输入框且输入框的值发生了改变时才会触发当个表单项的校验需要做4处绑定//el-form标签中:model表单对象:rules校验规则对象//el-form-item标签中:prop字段名称//表单控件v-model数据el-form refformRef//响应式数据:modelform//表单对象:rulesrules//规则对象el-form-item propname//校验的字段el-input v-modelform.name//获取输入的值placeholder请填写⽤⼾名prefix-iconUser//el-form-item/el-form-item/el-form单个组件校验完毕后再对整个表单进行校验// 提交constonSubmit(){// 做整体校验// 重点有两个方法需要掌握// validate((valid) {}): 整体校验formReactive.value.validate((valid){if(!valid)returnalert(请输入合法的值)console.log(ok)})}valid 是 validate 回调函数的参数它不是外部的变量而是validate 方法在完成所有字段校验后通过回调传递进来的校验结果通常是一个布尔值重置重置表单(把表单的值恢复成默认值移除红色的错误校验结果)constonReset(){formRef.value.resetFields()}还有其他Card卡片组件Table树形组件等等具体使用的时候可以参考官方文档。并且每个组件都会有属性去自定义设置一些需求大部分都能满足使用也很简单完结撒花如果这篇博客对你有帮助不妨点个赞支持一下吧你的鼓励是我创作的最大动力✨想获取更多干货欢迎关注我的专栏 →optimistic_chen收藏本文下次需要时不迷路我们下期再见 持续更新中……悄悄说点击主页有更多精彩内容哦