【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仓库](#定义Pinia Store仓库)
- 使用仓库
ElementPlus组件库
- 准备ElementPlus组件库
ElementPlus的常用组件
完结撒花！🎉

前言

【Vue入门】scoped与组件通信这篇博客简单说明了使用Pinia实现组件通信的方法。今天，我们将深入探讨如何利用Pinia来管理组件间的通信。

什么是pinia

首先，Pinia是一个状态管理工具，Vue的专属状态管理库，允许跨组件或页面共享状态，所以它的功能不止组件通信。

Pinia是一个非常强大的工具，程序组件多，意味着数据多；它保证不同组件数据保持同步，同时数据的修改都是可追踪的。

比如：一个仓库中有20件衣服，A卖出去8件，A认为仓库中还有12件；B卖出去12件，B认为仓库中还有8件；实际上，仓库中已经没有衣服了。

A和B因为没有保持数据同步，导致仓库数量出现差错，店长查看记录谁卖了多少，这就是数据的修改是可追踪的。

Pinia中需要存储的是多个组件都需要的数据（共享数据），某给组件的私有数据，依旧存储在组件内部（因为它别的组件不需要这些数据）

使用Pinia

准备三个组件，要求三个组共享数据（数据同步）

记得安装Pinia

javascript 复制代码

npm install pinia

main.js中创建pinia实例并注册

javascript 复制代码

import {createPinia} from 'pinia'

//创建实例
const pinia=createPinia()

//注册实例
app.use(pinia)

定义Pinia Store仓库

在src/store/store.js中定义仓库，用来管理共享的数据

javascript 复制代码

import { defineStore } from 'pinia'

//命名defineStore的返回值
export const useXxxStore = defineStore('仓库名称', Setup函数或Option对象)

defineStore中第一个参数是仓库名称也是唯一ID， Pinia 将⽤它来连接 store 和 devtools

javascript 复制代码

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

//定义stock的store并导出
export const useStockStore=defineStore('stock',()=>{
    //初始化数据
    const stock = ref(20)
    
    //增加
    const addStock=()=>{
        stock.value++;
    }
     
     //减少
    const subStock=()=>{
        stock.value--;
    }

     return {
        stock,
        addStock,
        subStock
     }
})

使用仓库

在根目录下，导入要使用的数据仓库

App.vue

javascript 复制代码

<template>
  <div id="app">
    <h1>Pinia 共享数据示例</h1>
    <DisplayCounter />
    <IncrementButton />
    <DecrementButton />
  </div>
</template>

<script setup>
import DisplayCounter from './components/DisplayCounter.vue'
import IncrementButton from './components/IncrementButton.vue'
import DecrementButton from './components/DecrementButton.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 2rem;
}
</style>

Add.vue增加计数

javascript 复制代码

<template>
  <div class="component-b">
    <h2>组件 B - 增加计数</h2>
    <button @click="counterStore.increment()">+1</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
</script>

<style scoped>
.component-b {
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 1rem;
  border-radius: 8px;
}
</style>

Sub.vue减少计数

javascript 复制代码

<template>
  <div class="component-c">
    <h2>组件 C - 减少计数</h2>
    <button @click="counterStore.decrement()">-1</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
</script>

<style scoped>
.component-c {
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 1rem;
  border-radius: 8px;
}
</style>

显示计数

javascript 复制代码

<template>
  <div class="component-a">
    <h2>组件 A - 显示计数</h2>
    <p>当前计数：{{ counterStore.stock }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'

const counterStore = useCounterStore()
</script>

<style scoped>
.component-a {
  border: 1px solid #ccc;
  padding: 1rem;
  margin: 1rem;
  border-radius: 8px;
}
</style>

上述代码实现了，三个组件之间共享数据，无论是+1还是-1，在显示计数组件都能同步展示。

ElementPlus组件库

ElementPlus组件库是基于Vue3，面向开发者的组件库，提供了丰富的PC组件,有效地降低了开发难度

我们之前的代码都是自己设计组件，自己组装完成任务；现在可以直接使用ElementPlus组件库中的组件，更加美观并且节省时间。

使用ElementPlus组件最重要的是要学会掌握组件的使用方法和文档的阅读，文档会教会我们如何使用，并且举一反三。

准备ElementPlus组件库

安装ElementPlus

javascript 复制代码

npm i element-plus

引入ElementPlus组件包

javascript 复制代码

//导入ElementPlus组件
import ElementPlus from 'element-plus'
//导入组件样式
import 'element-plus/dist/index.css'

//全局注册
app.use(ElementPlus)

ElementPlus的常用组件

Form表单组件

表单包含输入框、单选框、多选框等用户输入组件。

我们使用官方提供的实例来展示即可：

javascript 复制代码

//公共部分的JS代码
<script lang="ts" setup>
import { reactive } from 'vue'

// 表单对象
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

//提交
const onSubmit = () => {
  console.log('submit!')
}
</script>

el-form标签

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。

javascript 复制代码

<template>
  <!-- model:表单数据对象
      label-width:标签的宽度
      style:行内样式 
  -->
    <el-form :model="form" label-width="auto" style="max-width: 600px">
    ....
    ....
    ....

    </el-form>
</template>

el-form-item标签

每一个el-form-item标签都在el-form标签中包裹，一个el-form-item标签就是一个字段。

javascript 复制代码

<el-form-item label="Activity name">
      <!-- v-model双向绑定：收集表单数据 -->
      <el-input v-model="form.name" /> 
</el-form-item>

下拉列表标签

javascript 复制代码

    <el-form-item label="Activity zone">
      <!-- 下拉列表：placeholder占位提示文本 -->
      <el-select v-model="form.region" placeholder="please select your zone">
        <!-- 选项，
             label:展示的文本 
             value：同步的数据     
        -->
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>

日期时间选择标签

javascript 复制代码

    <el-form-item label="Activity time">
      <!--列 span: 占据的宽度份数，一行24份-->
      <el-col :span="11">
        <!-- 日期选择器 -->
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <!-- 时间选择器 -->
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>

复选框标签

javascript 复制代码

<el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <!-- 四个选择框 -->
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>

表单校验

Form组件提供了表单验证的功能,只需为rules属性传⼊约定的验证规则，并将form-item的prop属性设置为需要验证的特殊键值即可。

每个表单的功能校验的规则都不同，这是单个组件校验

javascript 复制代码

const rules={
   name:[
     {
       required:true,
       message:'请输入用户名',
       trigger:'blur'
     },
     {
       min:3,
       max:5,
       message: '输入长度必须在3-5之间'
     } 
   ],
   count:[
     {
       required:true,
       message:'请选择数量',
       trigger:'change'
     }
   ],
}

change 和 blur 是前端表单验证或事件监听中常见的两种触发器，它们的核心区别在于触发时机和触发条件。

blur：只要用户离开（失去焦点）输入框就会触发。
change：只有当用户离开输入框且输入框的值发生了改变时才会触发

当个表单项的校验需要做4处绑定：

javascript 复制代码

//el-form标签中：
:model="表单对象"
:rules="校验规则对象"

//el-form-item标签中：
:prop="字段名称"

//表单控件
v-model="数据"

javascript 复制代码

<el-form
      ref="formRef" //响应式数据
      :model="form" //表单对象
      :rules="rules"> //规则对象
     <el-form-item prop="name"> //校验的字段
         <el-input
            v-model="form.name" //获取输入的值
            placeholder="请填写⽤⼾名"
            prefix-icon="User" />
         </el-form-item>
      </el-form-item>
</el-form>

单个组件校验完毕后，再对整个表单进行校验

javascript 复制代码

// 提交
	const onSubmit = () => {
		// 做整体校验
		// 重点有两个方法需要掌握：
		//  validate((valid) => {}): 整体校验
		formReactive.value.validate((valid) => {
			if (!valid) return alert('请输入合法的值')
			console.log('ok')
		})
	}

valid 是 validate 回调函数的参数，它不是外部的变量，而是validate 方法在完成所有字段校验后，通过回调传递进来的校验结果（通常是一个布尔值）

重置：重置表单(把表单的值恢复成默认值，移除红色的错误校验结果)

javascript 复制代码

const onReset = () => {
		formRef.value.resetFields()
}

还有其他Card卡片组件，Table树形组件等等，具体使用的时候可以参考官方文档。

并且每个组件都会有属性去自定义设置一些需求，大部分都能满足，使用也很简单

完结撒花！🎉

如果这篇博客对你有帮助，不妨点个赞支持一下吧！👍
你的鼓励是我创作的最大动力～

✨ 想获取更多干货？ 欢迎关注我的专栏 → optimistic_chen

📌 收藏本文，下次需要时不迷路！

我们下期再见！💫 持续更新中......

悄悄说：点击主页有更多精彩内容哦～ 😊

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

文章目录

前言

什么是pinia

使用Pinia

记得安装Pinia

定义Pinia Store仓库

使用仓库

ElementPlus组件库

准备ElementPlus组件库

ElementPlus的常用组件

Form表单组件

el-form标签

el-form-item标签

下拉列表标签

日期时间选择标签

复选框标签

表单校验

完结撒花！🎉

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