【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
大家好,欢迎来到程序视点!我是小二哥!
前言
在VUE项目
开发中,一些数据常常被多个组件频繁使用,为了管理和维护这些数据,就出现了状态管理模式
。
今天小二哥要给大家推荐的不是VueX
,而是称为新一代的状态管理工具的Pinia.js
。
关于Pinia.js
Pinia.js
由 Vue.js团队成员
所开发的,是新一代的 Vuex
,即 Vuex5.x
,在 Vue3.0 项目
的使用中备受推崇。
它已经加入官方团队了哦!
Pinia.js
定位和特点:
- 完整的
typescript
的支持; - 极其
轻量
,压缩后的体积只有1.6kb; 去除 mutations
,只有state
,getters
,actions
(这是我最喜欢的一个特点);actions
支持同步和异步;- 没有模块嵌套,只有
store
的概念,能够构建多个store
,store
之间可以自由使用,更好的代码分割; - 关联
Vue Devtools
钩子,提供更好地开发体验;
使用
安装脚手架vite
首先确保使用的脚手架是vite
// 安装vitenpm init vite@latest
安装依赖
npm install pinia --save
以上安装完成之后,可以在项目根目录的package.json文件内找到相关的信息(部分片段):
{"dependencies": {"pinia": "^2.0.11","vue": "^3.2.25"},"devDependencies": {"@vitejs/plugin-vue": "^2.2.0","vite": "^2.8.0"}}
优化改造
因为需要在整个项目使用状态管理,因此需要在 main.js 文件里配置,以使它应用到整个应用(app):
// main.jsimport { createApp } from 'vue'import App from './App.vue'// 导入构造函数import { createPinia } from 'pinia'// 实例化 Piniaconst pinia = createPinia()// 创建Vue应用实例appconst app = createApp(App)// 应用以插件形式挂载Pinia实例app.use(pinia)app.mount('#app')
定义状态仓库
// src/store/index.js// 引入仓库定义函数import { defineStore } from 'pinia'// 传入2个参数,定义仓库并导出// 第一个参数唯一不可重复,字符串类型,作为仓库ID以区分仓库// 第二个参数,以对象形式配置仓库的state,getters,actions// 配置 state getters actionsexport const mainStore = defineStore('main', {// state 类似组件的data选项,函数形式返回对象state: () => {return {msg: '程序视点',counter: 0}},getters: {},actions: {}})
类似vuex,单独一个文件定义状态仓库并导出。
读取仓库内状态并改变
在需要使用状态的组件内需要先导入状态仓库:
import { mainStore } from "../store/index.js";
再实例化仓库函数:
const store = mainStore();
即可使用。
Store中State读取和修改
storeToRefs响应式函数
<template><button @click="handleClick">修改状态数据</button><!-- 模板内不需要加.value --><p>{{store.counter}}</p><!-- 或者使用解构之后的 --><p>{{counter}}</p></template><script setup>// 导入状态仓库import { mainStore } from "../store/index.js";// 使普通数据变响应式的函数 import { storeToRefs } from "pinia";// 实例化仓库const store = mainStore();// 解构并使数据具有响应式const { counter } = storeToRefs(store);// 点击 + 1;function handleClick() {// ref数据这里需要加.value访问counter.value++;}</script>
可以像下面这样直接修改 state
,但一般不建议这么做。
store.counter += 1;
通过 actions
去修改 state
action
里可以直接通过 this
访问。
export const mainStore = defineStore('main', {// state 类似组件的data选项,函数形式返回对象state: () => {return {msg: '程序视点',counter: 0}},getters: {},actions: {updateCount(){this.counter += 1;}}})
<script lang="ts" setup>
import { mainStore } from "../store/index.js";
const store = mainStore();userStore.updateCount();
</script>
$patch方法
对象形式修改
前面介绍的是少量数据的变更,如果涉及数据比较多,则推荐使用仓库实例的$patch方法
,批量修改,虽然看起来和前面的几乎没有区别,但是会加快修改速度,对程序的性能有很大的好处。$patch
传入一个对象,对象的属性就是各种状态。
<template><button @click="handleClick">修改状态数据</button><p>{{msg}}</p><!-- 或者使用解构之后的 --><p>{{counter}}</p></template><script setup>// 导入状态仓库import { mainStore } from "../store/index.js";// 使普通数据变响应式的函数 import { storeToRefs } from "pinia";// 实例化仓库const store = mainStore();// 解构并使数据具有响应式const { msg,counter } = storeToRefs(store);// 点击 + 1;修改字符串function handleClick() {store.$patch({msg: "pinia good!",counter: counter.value + 1,});}</script>
函数形式
上面例子中的$patch
也可以传入一个函数,函数参数为state
状态:
<template><button @click="handleClick">修改状态数据</button><p>{{msg}}</p><!-- 或者使用解构之后的 --><p>{{counter}}</p></template><script setup>// 导入状态仓库import { mainStore } from "../store/index.js";// 使普通数据变响应式的函数 import { storeToRefs } from "pinia";// 实例化仓库const store = mainStore();// 解构并使数据具有响应式const { msg,counter } = storeToRefs(store);// 点击 + 1;修改字符串function handleClick() {store.$patch((state) => {state.msg = "pinia good!";state.counter++;});}</script>
以上就是关于 Pinia.js
用法的一些介绍。关于Pinia.js
的基础操作可以通过下方阅读原文
查看。Pinia.js
的内容还远不止这些,更多内容及使用有待大家自己探索。
Pinia
官方文档
https://pinia.vuejs.org/
写在最后
【程序视点】助力打工人减负,从来不是说说而已!
后续小二哥会继续详细分享更多实用的工具和功能。持续关注,这样就不会错过之后的精彩内容啦!
如果这篇文章对你有帮助的话,别忘了【点赞】【分享】支持下哦~
相关文章:

【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
大家好,欢迎来到程序视点!我是小二哥! 前言 在VUE项目开发中,一些数据常常被多个组件频繁使用,为了管理和维护这些数据,就出现了状态管理模式。 今天小二哥要给大家推荐的不是VueX,而是称为新…...

PCB 间接雷击模拟
雷击是一种危险的静电放电事件,其中两个带电区域会瞬间释放高达 1 千兆焦耳的能量。雷击就像一个短暂而巨大的电流脉冲,会对建筑物和电子设备造成严重损坏。雷击可分为直接和间接两类,其中间接影响是由于感应能量耦合到靠近雷击位置的物体。间…...

JAVA泛型和顺序表ArrayList
目录 泛型 泛型的定义: 泛型的实例化: 泛型的使用: 顺序表ArrayList 顺序表ArrayList的两种实例化方法: ArrayList常用的方法: 1. add 方法 2. size ( ) 方法 3. get 方法 4. set 方法 5. 顺序表的三种遍历元素的方法…...

Qt桌面应用开发 第六天(鼠标事件 定时器事件 定时器类 事件分发器 事件过滤器)
目录 1.1鼠标进入和离开enterEvent\leaveEvent 1.2鼠标按下释放和移动mousePressEvent\mouseReleaseEvent\mouseMoveEvent 1.3定时器事件timerEvent 1.4定时器类QTimer 1.5事件分发器event 1.6事件过滤器eventFilter 1.1鼠标进入和离开enterEvent\leaveEvent 事件&#x…...

Javascript高级—深入JS模板字符串的高级用法
深入JS模板字符串的高级用法:解锁动态内容生成的无限可能 在JavaScript编程中,模板字符串(Template Literals)自ES6(ECMAScript 2015)引入以来,就以其简洁、直观的特性迅速成为开发者们生成动态…...

14. 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--章节总结
本章重点介绍了如何在一个简单的系统中实现基本的权限管理功能。通过构建一个简单的权限控制模型,章节阐述了如何为用户分配权限,并在应用程序中进行访问控制。 一、关键要点: 1. 用户管理(登录/注册/Token) 本章节聚…...

vulhub之fastjson
fastjson 1.2.24 反序列化 RCE 漏洞(CVE-2017-18349) 漏洞简介 什么是json json全称是JavaScript object notation。即JavaScript对象标记法,使用键值对进行信息的存储。举个简单的例子如下: {"name":"BossFrank", "age":23, "isDevel…...

2024年亚太地区数学建模大赛D题-探索量子加速人工智能的前沿领域
量子计算在解决复杂问题和处理大规模数据集方面具有巨大的潜力,远远超过了经典计算机的能力。当与人工智能(AI)集成时,量子计算可以带来革命性的突破。它的并行处理能力能够在更短的时间内解决更复杂的问题,这对优化和…...

卷积神经网络各层介绍
目录 1 卷积层 2 BN层 3 激活层 3.1 ReLU(Rectified Linear Unit) 3.2 sigmoid 3.3 tanh(双曲正切) 3.4 Softmax 4 池化层 5 全连接层 6 模型例子 1 卷积层 卷积是使用一个卷积核(滤波器)对矩阵进…...

Python应用指南:高德拥堵延时指数
随着城市化进程的加快,交通拥堵问题日益严重,成为影响城市居民生活质量的重要因素之一。为了科学评估和管理交通拥堵,各种交通拥堵指数应运而生。其中,高德地图提供的“拥堵延时指数”因其数据丰富、实时性强和应用广泛而备受关注…...

ISO 21434标准:汽车网络安全管理的利与弊
ISO 21434标准在提升汽车网络安全性方面起到了重要作用,但任何标准都不是完美无缺的,ISO 21434标准也存在一些不足之处。以下是对其不足之处的分析: 一、标准的灵活性与适应性 缺乏具体技术细节:ISO 21434标准更多地提供了网络安…...

无插件H5播放器EasyPlayer.js视频流媒体播放器如何开启electron硬解码Hevc(H265)
在数字化时代,流媒体播放器技术正经历着前所未有的变革。随着人工智能、大数据、云计算等技术的融合,流媒体播放器的核心技术不断演进,为用户提供了更加丰富和个性化的观看体验。 EasyPlayer.js H5播放器,是一款能够同时支持HTTP、…...

excel版数独游戏(已完成)
前段时间一个朋友帮那小孩解数独游戏,让我帮解,我看他用电子表格做,只能显示,不能显示重复,也没有协助解题功能,于是我说帮你做个电子表格版的“解题助手”吧,不能直接解题,但该有的…...

接口上传视频和oss直传视频到阿里云组件
接口视频上传 <template><div class"component-upload-video"><el-uploadclass"avatar-uploader":action"uploadImgUrl":on-progress"uploadVideoProcess":on-success"handleUploadSuccess":limit"lim…...

Arcgis 地图制作
地图如下,不同历史时期:...

【每日一题1121】python校招笔试题、面试题
1、Python字符串不是通过NUL或者’\0’来结束的 C语言中字符串使用’\0’作为结束符,以防止越界。但是在python中,字符串值只包含所定义的东西。 2、执行以下程序,输出结果为() class Base(object):count 0def __in…...

Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
Spring Boot Vue 基于 RSA 的用户身份认证加密机制实现 什么是RSA?安全需求介绍前后端交互流程前端使用 RSA 加密密码安装 jsencrypt库实现敏感信息加密 服务器端生成RSA的公私钥文件Windows环境 生成rsa的公私钥文件Linux环境 生成rsa的公私钥文件 后端代码实现返…...

Docker搭建有UI的私有镜像仓库
Docker搭建有UI的私有镜像仓库 一、使用这个docker-compose.yml文件: version: 3services:registry-ui:image: joxit/docker-registry-ui:2.5.7-debianrestart: alwaysports:- 81:80environment:- SINGLE_REGISTRYtrue- REGISTRY_TITLEAtt Docker Registry UI- DE…...

Qt打开文件对话框选择文件之后弹出两次
项目场景: 在 Qt 中,使用 ui 自动生成的 UI 文件会为每个控件自动生成一些默认的槽函数。如果您手动创建的槽函数名称与这些自动生成的槽函数名称相同,就会导致信号被多次连接,从而引发多次弹出文件对话框的问题。 原因分析&…...

【JAVA】正则表达式中的正向肯定预查
在Java中,正向肯定预查(Positive Lookahead)是一种正则表达式的高级特性,用于在匹配某个模式之前检查某个条件是否满足。正向肯定预查不会消耗字符,也就是说,它不会将匹配的字符从剩余的字符串中移除&#…...

django从入门到实战(一)——路由的编写规则与使用
Django 路由的编写规则与使用 在 Django 中,路由(URLconf)是将 URL 映射到视图函数的机制。它允许我们定义网站的 URL 结构,并将请求分发到相应的处理函数。以下是关于 Django 路由的定义规则及使用的详细介绍。 1. Django 的路…...

vue框架开发的前端项目,build和package的区别
在使用 Vue 框架开发前端项目时,build 和 package 是两个常见的操作,它们有不同的目的和作用。下面是它们的区别: 1. Build(构建) build 是将前端源代码(如 Vue 组件、JavaScript 文件、CSS 样式等&#…...

视频智能分析软件LiteAIServer摄像机实时接入分析平台噪声监测算法介绍
在视频监控领域,噪声问题一直是一个令人头疼的难题。无论是低光环境、摄像机传感器的高灵敏度,还是编码压缩过程中的失真,都可能导致视频中出现噪声,从而影响监控画面的清晰度和准确性。这些噪声不仅降低了视频的可读性࿰…...

鸿蒙UI开发与部分布局
UI开发 1. 布局概述 1.1 开发流程 1.先确定开发流程 -> 2.分析页面元素构成 ->3.选用合适的布局容器组件 1.3 布局元素组成:盒模型 2.1 布局分类 2.1 线性布局 线性布局是开发中最常用、最基础的布局,通过线性容器Row和Column构建 2.1.1 线性布…...

redis的map底层数据结构 分别什么时候使用哈希表(Hash Table)和压缩列表(ZipList)
在Redis中,Hash数据类型的底层数据结构可以是压缩列表(ZipList)或者哈希表(HashTable)。这两种结构的使用取决于特定的条件: 1. **使用ZipList的条件**: - 当Hash中的数据项(即f…...

css水平居中+垂直居中
display:“flex”,position: “absolute”,top:“50%”,left:“50%”,transform: ‘translate(-50%, -50%)’...

设计模式之 组合模式
组合模式(Composite Pattern)是一种结构型设计模式,它通过将对象组合成树形结构来表示“部分-整体”层次。组合模式允许客户端统一处理单个对象和对象集合。换句话说,组合模式让客户端可以像处理单个对象一样处理对象的集合&#…...

LCR 001 两数相除
一.题目: . - 力扣(LeetCode) 二.原始解法-超时: class Solution: def divide(self, a: int, b: int) -> int: # 1)分析: # 除法计算,不能使用除法符号,可以理解为实现除法 # 除法…...

数据库、数据仓库、数据湖、数据中台、湖仓一体的概念和区别
数据库、数据仓库、数据湖、数据中台和湖仓一体是数据管理和分析领域的不同概念,各自有不同的特点和应用场景。以下是它们的主要区别: 1. 数据库(Database) 定义:结构化的数据存储系统,用于高效地存储、检…...

vue 的生命周期函数
Vue 生命周期函数(生命周期钩子)是 Vue 实例从创建到销毁过程中,不同阶段所触发的特定函数。理解这些生命周期函数对于开发 Vue 应用至关重要,因为它们让你在不同的生命周期阶段执行代码,比如数据初始化、DOM 渲染完成…...