当前位置: 首页 > news >正文

【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!

大家好,欢迎来到程序视点!我是小二哥!

前言

VUE项目开发中,一些数据常常被多个组件频繁使用,为了管理和维护这些数据,就出现了状态管理模式

今天小二哥要给大家推荐的不是VueX,而是称为新一代的状态管理工具的Pinia.js
Pinia

关于Pinia.js

Pinia.jsVue.js团队成员所开发的,是新一代的 Vuex,即 Vuex5.x,在 Vue3.0 项目的使用中备受推崇。

Pinia
它已经加入官方团队了哦!

Pinia.js 定位和特点:

  • 完整的 typescript 的支持;
  • 极其轻量,压缩后的体积只有1.6kb;
  • 去除 mutations,只有 stategettersactions(这是我最喜欢的一个特点);
  • actions 支持同步和异步;
  • 没有模块嵌套,只有 store 的概念,能够构建多个 storestore 之间可以自由使用,更好的代码分割;
  • 关联 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:提升开发效率,更轻量、更高效的状态管理方案!

大家好&#xff0c;欢迎来到程序视点&#xff01;我是小二哥&#xff01; 前言 在VUE项目开发中&#xff0c;一些数据常常被多个组件频繁使用&#xff0c;为了管理和维护这些数据&#xff0c;就出现了状态管理模式。 今天小二哥要给大家推荐的不是VueX&#xff0c;而是称为新…...

PCB 间接雷击模拟

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

JAVA泛型和顺序表ArrayList

目录 泛型 泛型的定义&#xff1a; 泛型的实例化&#xff1a; 泛型的使用&#xff1a; 顺序表ArrayList 顺序表ArrayList的两种实例化方法&#xff1a; ArrayList常用的方法&#xff1a; 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模板字符串的高级用法&#xff1a;解锁动态内容生成的无限可能 在JavaScript编程中&#xff0c;模板字符串&#xff08;Template Literals&#xff09;自ES6&#xff08;ECMAScript 2015&#xff09;引入以来&#xff0c;就以其简洁、直观的特性迅速成为开发者们生成动态…...

14. 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--章节总结

本章重点介绍了如何在一个简单的系统中实现基本的权限管理功能。通过构建一个简单的权限控制模型&#xff0c;章节阐述了如何为用户分配权限&#xff0c;并在应用程序中进行访问控制。 一、关键要点&#xff1a; 1. 用户管理&#xff08;登录/注册/Token&#xff09; 本章节聚…...

vulhub之fastjson

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

2024年亚太地区数学建模大赛D题-探索量子加速人工智能的前沿领域

量子计算在解决复杂问题和处理大规模数据集方面具有巨大的潜力&#xff0c;远远超过了经典计算机的能力。当与人工智能&#xff08;AI&#xff09;集成时&#xff0c;量子计算可以带来革命性的突破。它的并行处理能力能够在更短的时间内解决更复杂的问题&#xff0c;这对优化和…...

卷积神经网络各层介绍

目录 1 卷积层 2 BN层 3 激活层 3.1 ReLU&#xff08;Rectified Linear Unit&#xff09; 3.2 sigmoid 3.3 tanh&#xff08;双曲正切&#xff09; 3.4 Softmax 4 池化层 5 全连接层 6 模型例子 1 卷积层 卷积是使用一个卷积核&#xff08;滤波器&#xff09;对矩阵进…...

Python应用指南:高德拥堵延时指数

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

ISO 21434标准:汽车网络安全管理的利与弊

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

无插件H5播放器EasyPlayer.js视频流媒体播放器如何开启electron硬解码Hevc(H265)

在数字化时代&#xff0c;流媒体播放器技术正经历着前所未有的变革。随着人工智能、大数据、云计算等技术的融合&#xff0c;流媒体播放器的核心技术不断演进&#xff0c;为用户提供了更加丰富和个性化的观看体验。 EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、…...

excel版数独游戏(已完成)

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

接口上传视频和oss直传视频到阿里云组件

接口视频上传 <template><div class"component-upload-video"><el-uploadclass"avatar-uploader":action"uploadImgUrl":on-progress"uploadVideoProcess":on-success"handleUploadSuccess":limit"lim…...

Arcgis 地图制作

地图如下,不同历史时期&#xff1a;...

【每日一题1121】python校招笔试题、面试题

1、Python字符串不是通过NUL或者’\0’来结束的 C语言中字符串使用’\0’作为结束符&#xff0c;以防止越界。但是在python中&#xff0c;字符串值只包含所定义的东西。 2、执行以下程序&#xff0c;输出结果为&#xff08;&#xff09; class Base(object):count 0def __in…...

Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现

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

Docker搭建有UI的私有镜像仓库

Docker搭建有UI的私有镜像仓库 一、使用这个docker-compose.yml文件&#xff1a; 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打开文件对话框选择文件之后弹出两次

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

【JAVA】正则表达式中的正向肯定预查

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

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...