Vue 3与Pinia:下一代状态管理的探索

引言

随着Vue 3的推出,Pinia应运而生,成为官方推荐的状态管理库,旨在替代Vuex。Pinia与Vuex相比,带来了以下主要区别和优势:

  • 更简洁的API:Pinia的API设计更加直观和简洁,易于理解和使用。
  • 更好的TypeScript支持:Pinia从一开始就考虑了TypeScript的集成,使得类型安全的代码编写更加方便。
  • 模块化:Pinia支持模块化store,使得状态管理更加灵活和可扩展。
  • 无需映射辅助函数:Pinia不需要像Vuex那样使用map辅助函数,简化了组件中的状态访问。

说人话,升级版的vuex

Pinia简介

Pinia 是一个为 Vue.js 设计的状态管理库,它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案,它旨在替代 Vuex 4,后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理,同时保持足够的灵活性以适应各种规模的应用。

Pinia的诞生背景和目标

随着 Vue 3 的推出,其引入了 Composition API,这为状态管理提供了新的可能性。Pinia 的诞生正是为了充分利用 Composition API 的优势,提供一个更加现代化和简洁的状态管理库。

Pinia与Vuex 4的主要区别

Pinia 与 Vuex 4 相比,引入了许多改进和新特性:

  • API 设计:Pinia 的 API 设计更加简洁,去除了 Vuex 4 中的一些复杂概念,如 mutations。
  • TypeScript 支持:Pinia 从一开始就考虑了 TypeScript 的集成,提供了更好的类型支持。
  • 模块化:Pinia 支持模块化 store,每个模块可以有自己的 state、getters、actions 和 mutations。
  • 无需映射辅助函数:在 Pinia 中,你不需要使用 mapState、mapGetters 等辅助函数,可以直接在组件中使用 store。

Pinia的核心概念(store、state、getters、actions)

Pinia 的核心概念与 Vuex 类似,但进行了简化和改进:

  • Store:Pinia 的 store 是状态管理的基本单位,每个应用可以有多个 store。一个 store 包含了应用状态(state)、计算属性(getters)、以及修改状态的方法(actions)。
  • State:State 是应用的当前状态,它是一个响应式的 JavaScript 对象。在 Pinia 中,state 可以是任何类型的数据。
  • Getters:Getters 类似于 Vue 的计算属性,它们是基于 state 的派生状态。Getters 可以用来返回经过计算或转换的 state,或者用来实现一些通用的逻辑。
  • Actions:Actions 是用来修改 state 的方法。在 Pinia 中,actions 可以是同步的,也可以是异步的。与 Vuex 不同,Pinia 不再区分 actions 和 mutations,所有的状态修改方法都称为 actions。

安装和设置Pinia

如何在Vue 3项目中安装Pinia

1.安装Pinia
使用npm或yarn来安装Pinia库。在项目根目录下打开终端,执行以下命令之一:

npm install pinia

或者

yarn add pinia

2.创建Pinia实例
在你的主文件(通常是main.jsmain.ts)中,引入并创建Pinia实例:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.mount('#app')
创建第一个Pinia store的步骤

1.创建Store文件
在项目中创建一个新的文件夹,例如stores,并在其中创建一个新的文件,例如counterStore.js

2.定义Store
counterStore.js文件中,使用defineStore函数定义你的store

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},actions: {increment() {this.count++},decrement() {this.count--}}
})
在Vue组件中使用Pinia store

1.引入Store
在需要使用store的组件中,引入你刚才创建的store:

import { useCounterStore } from '@/stores/counterStore'

2.使用Store
在组件的setup函数中,使用useCounterStore来获取store实例,并访问其状态和方法:

import { useCounterStore } from '@/stores/counterStore'
import { ref } from 'vue'export default {setup() {const counterStore = useCounterStore()const count = ref(counterStore.count)function increment() {counterStore.increment()}function decrement() {counterStore.decrement()}return { count, increment, decrement }}
}

3.模板中使用
在组件的模板部分,你可以直接使用count变量和incrementdecrement方法:

<template><div><h1>Count: {{ count }}</h1><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template>

使用pinia-plugin-persistedstate持久化存储(组件式为例)

下面是一个类似的示例,展示了如何在 Pinia store 中使用组件式的持久化存储:

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';export const useCounterStore = defineStore('counter', () => {// 定义状态const count = ref(100);const msg = ref('hello pinia');// 定义方法const addCount = () => count.value++;const subCount = () => count.value--;// 定义计算属性const double = computed(() => count.value * 2);// 返回状态和方法return {count,addCount,subCount,double,msg,};
}, {// 持久化配置persist: {key: 'hahaha', // 持久化存储的键名paths: ['count', 'msg'], // 指定需要持久化的状态路径},
});

在这个示例中,我们定义了一个名为 useCounterStore 的 Pinia store,其中包含 count 和 msg 两个状态,以及 addCountsubCount 两个方法来修改 count 的值。我们还定义了一个计算属性 double,用于计算 count 的两倍。

在 persist 配置中,我们指定了 key 为 'hahaha',这将作为存储在本地存储中的键名。paths 数组包含了需要持久化的状态路径,这里我们指定了 count 和 msg

当热还有其他的persist配置,不太常用就不讲了,有兴趣的小伙伴可以去官网查看(结尾会放)

Pinia进阶特性

插件系统和自定义插件的创建

Pinia 提供了一个强大的插件系统,允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。

1.创建插件
创建一个插件通常涉及定义一个函数,该函数接收一个Pinia实例作为参数,并对其进行操作。

export function myPiniaPlugin(pinia) {// 可以在这里添加全局状态、拦截actions等
}

2.使用插件
在创建Pinia实例时,可以将插件添加到实例中。

const pinia = createPinia()
pinia.use(myPiniaPlugin)
模块化store和命名空间

Pinia 支持模块化store,允许你将不同的状态逻辑分割到不同的文件中,提高代码的可维护性。

1.定义模块化store
在模块化store中,你可以定义自己的state、getters和actions。

// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
})

2.使用命名空间
在模块化store中,你可以使用命名空间来避免不同模块间的命名冲突。

// store/modules/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++},decrement() {this.count--}}
}, {// 开启命名空间namespaced: true
})

3.在组件中使用模块化store
在组件中,你可以通过命名空间来访问特定模块的状态和actions。

import { useCounterStore } from '@/stores/modules/counter'const counterStore = useCounterStore()
console.log(counterStore.count) // 使用命名空间访问状态
counterStore.increment() // 使用命名空间访问actions

 资料推荐

配置 | pinia-plugin-persistedstate官网

总结

掌握 Pinia 的使用,将有助于你在开发 Vue 3 应用时,更加高效地管理复杂的状态逻辑,提升应用的整体性能和用户体验。希望本文能为你在使用 Pinia 进行状态管理时提供有价值的参考和指导。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44006.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

220V降5V芯片输出电压电流封装选型WT

220V降5V芯片输出电压电流封装选型WT 220V降5V恒压推荐&#xff1a;非隔离芯片选型及其应用方案 在考虑220V转低压应用方案时&#xff0c;以下非隔离芯片型号及其封装形式提供了不同的电压电流输出能力&#xff1a; 1. WT5101A&#xff08;SOT23-3封装&#xff09;适用于将2…

【实战场景】大文件解析入库的方案有哪些?

【实战场景】大文件解析入库的方案有哪些&#xff1f; 开篇词&#xff1a;干货篇&#xff1a;分块解析内存映射文件流式处理数据库集群处理分布式计算框架 总结篇&#xff1a;我是杰叔叔&#xff0c;一名沪漂的码农&#xff0c;下期再会&#xff01; 开篇词&#xff1a; 需求背…

14-57 剑和诗人31 - LLM/SLM 中的高级 RAG

​​​ 首先确定几个缩写的意思 SLM 小模型 LLM 大模型 检索增强生成 (RAG) 已成为一种增强语言模型能力的强大技术。通过检索和调整外部知识&#xff0c;RAG 可让模型生成更准确、更相关、更全面的文本。 RAG 架构主要有三种类型&#xff1a;简单型、模块化和高级 RAG&…

性能测试的流程(企业真实流程详解)(二)

性能测试的流程 1.需求分析以及需求确定(指标值&#xff0c;场景&#xff0c;环境&#xff0c;人员) 一般提出需求的人员有&#xff1a;客户&#xff0c;产品经理&#xff0c;项目组领导等 2.性能测试计划和方案制定 基准测试: 负觋测试: 压力测试: 稳定性测试: 其他:配置测试…

Git安装使用教程

# 《Git 操作使用教程》 一、Git 简介 Git 是一个分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。它让开发者可以轻松地跟踪代码的更改、与团队成员协作&#xff0c;并管理项目的不同版本。 二、安装 Git 在 Windows 系统上&#xff0c;可以从 Git 官…

刷题Day47|1143.最长公共子序列、1035.不相交的线、53. 最大子序和、

1143.最长公共子序列 1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;dp数组含义是以i-1和j-1为结尾的最长公共子序列。当text1[i - 1] text2[i - 1], dp[i][j] dp[i - 1][j - 1] 1; 否则dp[i][j] max(dp[i - 1][j], dp[i][j - 1]); 因为两…

无法连接Linux远程服务器的Mysql,解决办法

问题描述 如果是关闭虚拟机之后&#xff0c;二次打开无法连接Mysql&#xff0c;则可尝试一下方法进行解决 解决方法 关闭虚拟机的防火墙 1&#xff1a;查看防火墙状态 systemctl status firewalld 一下显示说明防火墙是启动的状态 2&#xff1a;关闭防火墙 systemctl st…

git提交emoji指南

emoji 指南 emojiemoji 代码commit 说明&#x1f389; (庆祝)tada初次提交✨ (火花)sparkles引入新功能&#x1f516; (书签)bookmark发行/版本标签&#x1f41b; (bug)bug修复 bug&#x1f691; (急救车)ambulance重要补丁&#x1f310; (地球)globe_with_meridians国际化与本…

PTA - 编写函数计算圆面积

题目描述&#xff1a; 1.要求编写函数getCircleArea(r)计算给定半径r的圆面积&#xff0c;函数返回圆的面积。 2.要求编写函数get_rList(n) 输入n个值放入列表并将列表返回 函数接口定义&#xff1a; getCircleArea(r); get_rList(n); 传入的参数r表示圆的半径&#xff0c…

音视频解封装demo:将FLV文件解封装(demux)得到文件中的H264数据和AAC数据(纯手工,不依赖第三方开源库)

1、README 前言 注意&#xff1a;flv是不支持h.265封装的。目前解封装功能正常&#xff0c;所得到的H.264文件与AAC文件均可正常播放。 a. demo使用 $ make clean && make DEBUG1 $ $ $ ./flv_demux_h264_aac Usage: ./flv_demux_h264_aac avfile/test1.flv./flv_d…

压缩感知1——算法简介

传统的数据采集 传统的数字信号采样定律就是有名的香农采样定理&#xff0c;又称那奎斯特采样定律定理内容如下&#xff1a;为了不失真地恢复模拟信号&#xff0c;采样频率应该不小于模拟信号频谱中最高频率的2倍 上述步骤得到的数字信号的数据量比较大&#xff0c;一方面不利…

C语言程序题(一)

一.三个整数从大到小输出 首先做这个题目需要知道理清排序的思路&#xff0c;通过比较三个整数的值&#xff0c;使之从大到小输出。解这道题有很多方法我就总结了两种方法&#xff1a;一是通过中间变量比较和交换&#xff0c;二是可以用冒泡排序法&#xff08;虽然三个数字排序…

车载聚合路由器应用场景分析

乾元通QYT-X1z车载式1U多卡聚合路由器&#xff0c;支持最多8路聚合&#xff0c;无论是应急救援&#xff0c;还是车载交通&#xff0c;任何宽带服务商无法覆盖的区域&#xff0c;聚合路由器可提供现场需要的稳定、流畅、安全的视频传输网络&#xff0c;聚合路由器可无缝接入应急…

Dify中的weaviate向量数据库操作

一.安装weaviate客户端 1.Dify 0.6.9中weaviate信息 在Dify 0.6.9版本中weaviate容器信息如下: # The Weaviate vector store. weaviate:image: semitechnologies/weaviate:1.19.0restart: alwaysvolumes:# Mount the Weaviate data directory to the container.- ./volume…

【操作系统】进程管理——信号量机制(个人笔记)

学习日期&#xff1a;2024.7.9 内容摘要&#xff1a;信号量机制&#xff0c;用信号量实现进程的同步与互斥 信号量机制 信号量的概念 在上节内容中&#xff0c;我们学习了进程互斥的软件和硬件解决方案&#xff0c;但这些方案都有各自的问题&#xff0c;双标志法都因为检查和…

【自用】【高昆轮概率论与数理统计笔记】2.1 分布函数的概念与性质

不定期更新&#xff0c;前面的章节会在学完后补回来&#xff0c;重新学学概率&#xff0c;当年考研考的数学二&#xff0c;没有概率基础&#xff0c;想自己补补&#xff0c;视频课是高昆轮老师讲的浙大四版概率论教材的视频课&#xff0c;地址&#xff1a; 第一章&#xff1a;h…

数据库MySQL---基础篇

存储和管理数据的仓库 MySQL概述 数据库相关概念 数据库&#xff08;DataBase&#xff09;---数据存储的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统&#xff08;DBMS&#xff09;-----操纵和管理数据库的大型软件 SQL----操作关系型数据库的编程语言&#xff…

Python:安装/Mac

之前一直陆陆续续有学python&#xff01;今天开始&#xff01;正式开肝&#xff01;&#xff01;&#xff01; 进入网站&#xff1a;可能会有点慢&#xff0c;多开几个网页 https://www.python.org 点击下载&#xff0c;然后进入新的页面&#xff0c;往下滑 来到File&#xff0…

实时温湿度监测系统:Micropython编码ESP32与DHT22模块的无线数据传输与PC端接收项目

实时温湿度监测系统 前言项目目的项目材料项目步骤模拟ESP32接线连接测试搭建PC端ESP32拷录环境对ESP32进行拷录PC端搭建桌面组件本地数据接收桌面小组件部分 实验总结 前言 人生苦短&#xff0c;我用Python。 由于我在日常工作中经常使用Python&#xff0c;因此在进行该项目…

基于java+springboot+vue实现的校园二手书交易平台(文末源码+Lw)287

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…