【前端系列02】Pinia状态管理库

已于 2025-01-05 16:23:09 修改
阅读量458 收藏 3
点赞数 2
文章标签： 前端 pinia axios
于 2025-01-03 23:01:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_75503057/article/details/144918918
版权

文章目录

一、前言🚀🚀🚀

在这里插入图片描述

☀️
回报不在行动之后，回报在行动之中。

这个系列可以叫作《前端系列》，我将把前端工程化所需要的思想，以及所用到的技术，把它用笔记的形式展示出来，请期待这个系列的更新吧。

二、Pinia状态管理库：☀️☀️☀️

2.1 pinia基本使用

① pinia充当中转站存放token

在这里插入图片描述
  当浏览器登录用户后，会响应一个token，但是如果访问其他组件，将拿不到这个token，所以需要通过一个中转站即pinia来存放token，当登录后将token放到pinia那，然后访问其他组件时就从pinia中取token。

② 使用步骤

在这里插入图片描述

最低0.47元/天 解锁文章
前端Vue.js的状态管理库选型与应用
小白菜的博客
04-12 670
在Vue.js开发中，随着项目规模的不断扩大，组件之间的状态管理变得愈发复杂。状态管理库的出现就是为了解决这一问题，它可以帮助开发者更好地管理应用中的状态，提高代码的可维护性和可测试性。本文的目的是对常见的Vue.js状态管理库进行全面的分析和比较，为开发者提供选型的参考依据，并通过实际案例展示如何在项目中应用这些状态管理库。本文将首先介绍状态管理的核心概念和常见状态管理库之间的联系，然后详细讲解核心算法原理和具体操作步骤，接着通过数学模型和公式对状态管理的原理进行深入分析，并结合实际案例进行说明。
Vue 专属状态管理库Pinia的使用与实践
cooldream2009的博客
11-19 1641
在 Vue 的开发中，状态管理是一个不可或缺的部分，尤其是在复杂的应用中，组件之间的状态共享和管理变得至关重要。Pinia 作为 Vue 的专属状态管理库，凭借其简洁的 API 和出色的性能表现，逐渐成为开发者的首选。本文将深入介绍 Pinia 的基础知识、核心功能以及实际使用场景，帮助你更高效地管理 Vue 应用中的状态。
新手入门Pinia状态管理库，看完这篇文章你就懂了！
weixin_38568415的博客
08-18 345
Pinia本质上依然是一个状态管理的库，它允许你跨组件/页面进行状态共享。我们需要知道 Store 是使用定义的。并且它需要一个唯一名称，作为第一个参数传递。这个name，也称为id，是必需的，Pinia使用它来将store连接到devtools。返回的函数统一使用useXXX作为命名方案，这是约定的一种规范。count: 1})})getters相当于store的计算属性。getters中可以接收一个state作为参数的函数。
pinia状态管理
ZhangYu_010228的博客
04-11 1287
Pinia本质上是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样），是Vuex的代替者。
Pinia 状态管理库的使用方法
最新发布
xuukai的博客
03-09 977
在 Pinia 中，状态管理通过定义 Store 来实现。
【Vue全家桶】Pinia状态管理
QDCXYXZ_的博客
04-03 2636
Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
Vue状态管理库Pinia详解
威哥爱编程，优快云 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
08-21 1718
首先，你需要从 Pinia 导入函数，并使用它来定义一个新的Store。users: [] // 初始状态是一个空数组}),getters: {// 一个 getter 函数，返回数组中的用户数量},actions: {// 一个 action 函数，用于添加用户})使用定义一个新的 Store，传入一个唯一的 ID 和一个配置对象。items: [] // 购物车初始状态为空数组}),getters: {// 计算属性，返回购物车中商品的总数量},actions: {
Pinia｜VUe的状态管理库
Judy1623
01-31 1193
patch 是 pinia 提供的一个api，用来批量修改 state 中的数据，接收一个对象参数，对象中的属性就是 state 中的属性，值就是要修改的值。创建store需要调用pinia中的defineStore方法,该方法接受两个参数，第一个参数是store的唯一 id，第二个参数是store的配置属性。可以直接使用userStore访问仓库中的属性。这是$patch的另一种写法，回调默认接收一个参数，也就是store中的state，在回调函数中修改state中的数据。
前端状态管理：Pinia.zip
08-18
史上最全web前端技术全套教程，包括： 前端API集成 前端基础知识 前端开发最佳实践 前端性能优化 前端构建工具 前端框架和库 前端测试工具 前端状态管理 等流行技术的系列教程
掌握Vue3新特性：Pinia状态管理库实战指南
资源摘要信息: "Vue3中Pinia状态管理库学习笔记" 在前端开发框架中，Vue.js 的生态系统一直在不断地扩展和完善。随着 Vue3 的发布，社区推出了一系列基于 Vue3 的新工具和库，其中Pinia就是其中之一。Pinia 是一个...
课程设计：基于vue3-pinia-elementPlus的前端电商管理系统
07-02
Pinia是Vue3官方推荐的状态管理库，替代了之前的Vuex，提供了更简洁和易于理解的API。而Element Plus则是一个企业级的UI组件库，为Vue应用程序提供丰富的界面元素。 首先，我们从Vue3开始。Vue3引入了大量的性能...
vue3的状态管理库——pinia使用介绍
qq_55018264的博客
10-21 1088
使用 defineStore 创建一个 store。//定义store//导入了 defineStore 和 ref。defineStore 用于定义一个新的 store，而 ref 用于创建响应式的数据。/*第一个参数:第一个参数是 store 的唯一名称 'token'第二个参数:函数,函数的内部可以定义状态的所有内容,返回一个对象，该对象包含状态和方法。*///定义状态的内容//1.响应式变量//使用 ref 创建了一个响应式变量 token，初始值为空字符串。
还不了解 Pinia 状态管理库⁉️
Java.慈祥
08-18 1107
定义Store状态管理仓库// 定义store// defineStore(仓库的唯一标识, () => { ... })// 仓库唯一标识,也被称作id：是必须传入的,Pinia将用它来获取store// defineStore() 的第二个参数可接受两类值：Setup 函数或 Option对象,分别对应Vue3\Vue2写法;//以 Option对象,形式定义Pinia store库,貌似现在用的比较多,因为结构相对清晰,语法与Vux几乎类似;
Vue状态管理库-Pinia
前端攻城狮
02-21 1350
vue的全局状态管理库Pinia的使用
Pinia状态管理
凉茶铺的博客
01-26 2480
介绍了Vue的状态管理工具pinia的使用
Vue3 的状态管理库（Pinia）
weixin_62897746的博客
02-20 6691
- `Pinia` 是 `Vue` 的专属状态管理库，它允许你跨组件或页面共享状态。 - `Pinia` 是 `Vuex4` 的升级版，也就是 `Vuex5` - `Pinia` 极大的简化了 `Vuex` 的使用，是 `Vue3` 的新的状态管理工具 - `Pinia` 对 `ts` 的支持更好，性能更优， 体积更小，无 `mutations`，可用于 `Vue2` 和 `Vue3` - `Pinia` 支持 `Vue Devtools`、 模块热更新和服务端渲染 - `Pinia` 的官方地址为：[`h
VUE3使用pinia 状态管理
Xwz的博客
02-23 502
1 pinia 的理解在 vue 2.x 中，vuex是官方的状态管理库，并且 vue3 中也有对应的 vuex 版本。个人认为Pinia语法更加简洁，不必像 vuex 那样定义 state、mutations、actions、getters 等，实现了API 等方式返回状态和改变状态的方法。
Vue 3.0 pinia状态管理库
m0_60970928的博客
02-21 1076
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态store采用的是选项式模式时，state选项为函数返回的对象，在其定义共享的数据import {// 共享的数据，为函数返回的对象形式 state :() =>({age : 27 , level : 5 , account : 'SD77842' , nickname : '自古风流' }) })store采用的是组合式模式时，在其函数内定义的ref变量，最终return出去来提供共享的数据import {import {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值