当前位置: 首页 > 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;它不会将匹配的字符从剩余的字符串中移除&#…...

django从入门到实战(一)——路由的编写规则与使用

Django 路由的编写规则与使用 在 Django 中&#xff0c;路由&#xff08;URLconf&#xff09;是将 URL 映射到视图函数的机制。它允许我们定义网站的 URL 结构&#xff0c;并将请求分发到相应的处理函数。以下是关于 Django 路由的定义规则及使用的详细介绍。 1. Django 的路…...

vue框架开发的前端项目,build和package的区别

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

视频智能分析软件LiteAIServer摄像机实时接入分析平台噪声监测算法介绍

在视频监控领域&#xff0c;噪声问题一直是一个令人头疼的难题。无论是低光环境、摄像机传感器的高灵敏度&#xff0c;还是编码压缩过程中的失真&#xff0c;都可能导致视频中出现噪声&#xff0c;从而影响监控画面的清晰度和准确性。这些噪声不仅降低了视频的可读性&#xff0…...

鸿蒙UI开发与部分布局

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

redis的map底层数据结构 分别什么时候使用哈希表(Hash Table)和压缩列表(ZipList)

在Redis中&#xff0c;Hash数据类型的底层数据结构可以是压缩列表&#xff08;ZipList&#xff09;或者哈希表&#xff08;HashTable&#xff09;。这两种结构的使用取决于特定的条件&#xff1a; 1. **使用ZipList的条件**&#xff1a; - 当Hash中的数据项&#xff08;即f…...

css水平居中+垂直居中

display:“flex”,position: “absolute”,top:“50%”,left:“50%”,transform: ‘translate(-50%, -50%)’...

设计模式之 组合模式

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

LCR 001 两数相除

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

数据库、数据仓库、数据湖、数据中台、湖仓一体的概念和区别

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

vue 的生命周期函数

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