Vue3 状态管理 - Pinia，超详细讲解！

已于 2024-09-01 18:55:57 修改
阅读量1.8k 收藏 12
点赞数 43
分类专栏： vue2/3 从基础到起飞 文章标签： vue.js 前端 javascript 数据可视化 vue elementui html
于 2024-06-18 15:39:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/139753774
版权

前言：

哈喽，大家好，我是码喽的自我修养！今天给大家分享【Vue3 状态管理 - Pinia】，超详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注 哦 💕

🌈🌈文章目录

前言：

1. Pinia介绍

2. 手动添加Pinia到Vue项目

1.使用 Vite 创建一个空的 Vue3项目

2.按照官方文档安装 pinia 到项目中

3. Pinia基础使用

1.定义store

2.组件使用store

4. getters实现

5. action异步实现

6. storeToRefs工具函数

7. Pinia的调试

8. Pinia持久化插件

1.安装插件 pinia-plugin-persistedstate

2.使用 main.js

3.配置 store/counter.js

1. Pinia介绍

Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
【超详细】vue3+pinia+自动持久化插件+自定义存储器对象实现状态数据持久化
Samdy_Chan的专栏
03-08 1985
vue3 + pinia + pinia-plugin+persistedstate + js-cookie 实现状态管理及数据自动持久化到 localStorage、sessionStorage、cookieStorage
vue3的pinia(大菠萝)
longyan_tianyu的博客
03-10 1万+
vue3的pinia(大菠萝)
Vue3学习（三）Pinia、组件通信
最新发布
二狗mao的博客
10-16 1173
父组件也可以定义自定义事件让子组件接收，让子组件去触发这个自定义事件，完成数据的传递。<template><h3>父组件</h3><h4 v-show="toy">子给的玩具：{{ toy }}</h4>-- 给子组件Child绑定事件 --></div>// 数据// 用于保存传递过来的玩具</script><template><h3>子组件</h3><h4>玩具：{{ toy }}</h4>
vue3 - 新一代的状态储存仓库 Pinia
qq_43886365的博客
09-27 3274
vue3新一代的状态储存仓库Pinia使用说明
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
Forever_Hopeful的博客
04-13 2277
Pinia状态管理工具：【Vue3 + Pinia使用】 安装Pinia && Pinia基本使用 && 创建 store仓库 && Pinia持久化存储 && 配置本地存储 && 指定仓库数据存储
【vue3之Pinia：状态管理工具】
m0_75134766的博客
03-07 978
vue3,pinia
【Vue3教程】Pinia
weixin_43676950的博客
08-15 1469
Pinia符合直觉的 Vue.js 状态管理库。
Vue 3 状态管理 Pinia 详解
qq_42072014的博客
07-29 476
Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它的设计理念是简单、直观，易于学习和使用。Pinia 支持组合式 API 和选项式 API，使得状态管理更加灵活。Pinia 为 Vue 3 提供了一个简单而强大的状态管理解决方案。通过本文的介绍，你应该已经了解了如何在 Vue 3 项目中使用 Pinia 进行状态管理。Pinia 的灵活性和易用性使其成为许多开发者首选的状态管理库。
Vue3中使用Pinia详解
九仞山的专栏
06-12 2万+
详细介绍了Vue3中使用Pinia做全局状态管理的使用
Vue3 的状态管理库（Pinia）
weixin_62897746的博客
02-20 6337
- `Pinia` 是 `Vue` 的专属状态管理库，它允许你跨组件或页面共享状态。 - `Pinia` 是 `Vuex4` 的升级版，也就是 `Vuex5` - `Pinia` 极大的简化了 `Vuex` 的使用，是 `Vue3` 的新的状态管理工具 - `Pinia` 对 `ts` 的支持更好，性能更优， 体积更小，无 `mutations`，可用于 `Vue2` 和 `Vue3` - `Pinia` 支持 `Vue Devtools`、 模块热更新和服务端渲染 - `Pinia` 的官方地址为：[`h
Vue3中的pinia使用（收藏版）
weixin_57677300的博客
12-08 2万+
pinia官方文档Pinia 的优点更多查看文档… 在main.js中引入pinia并创建容器挂载到根实例上 创建stores文件夹和index.js文件（这个文件以后基本不用管了） 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 然后再组件中使用： 运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 运行结
课程设计：基于vue3-pinia-elementPlus的前端电商管理系统
07-02
Pinia是Vue3官方推荐的状态管理库，替代了之前的Vuex，提供了更简洁和易于理解的API。而Element Plus则是一个企业级的UI组件库，为Vue应用程序提供丰富的界面元素。 首先，我们从Vue3开始。Vue3引入了大量的性能...
基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant的电商管理系统源码
08-16
本文将详细讲解基于Spring Boot+Vue 3+Element-Plus+Vue-Router+Pinia+Vant构建的电商管理系统源码。这套系统适用于毕业设计、课程设计或项目工程，所有源码都经过验证，可直接运行，是学习和实践的理想资源。 首先...
vite+vue3动态模块化导入并使用pinia
03-25
通过这样的结构，开发者可以在Vue3和Vite的现代化开发环境中充分利用Pinia进行状态管理，实现动态模块化的加载，提升应用的性能和可维护性。这种技术组合不仅简化了代码结构，也提高了开发效率。
Vue3中使用pinia
看见小狮子没
09-22 1万+
当我们接收到pinia数据且对其数据进行了大量修改又想还原时，调用此方法就可以将接收的pinia数据全部重置还原。箭头函数的使用：(ps:虽然鼓励但是依然提供了非es6玩家的使用方式 内部可以用this代表state)说明成功修改了pinia里面的数据，且界面刷新证明这种直接修该pinia数据的方式依然是响应式数据。在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)中的store是自己设定的接收变量，重点是。在之前的案例中修改了pinia的name属性值。
vue3的pinia详解
m0_63040701的博客
05-27 1601
pinia 支持热模块替换，因此你可以编辑store，并直接在您的应用程序中与它们交互，而无需重新加载页面，允许您保持现有的状态，添加，甚至删除state，action和getter。Actions 相当于组件中的 methods。在 pinia 中修改状态要比在 vuex 中修改状态简单的多，因为不用引入额外的概念，直接用 store.counter++ 修改 store。直接从 pinia 中解构赋值，操作的时候会发现，内容根本不会发生变化，因为直接从 pinia 中解构数据失去了响应式。
Vue3如何使用Pinia详细介绍、pinia持久化存储(pinia-plugin-persistedstate详细配置)
热门推荐
H524268015wsw的博客
11-23 3万+
1、在stores文件夹下创建一个store ，名为user.js ，命名是尽量是见名知意的。2、定义user.jsStore 是使用定义的，并且它需要一个唯一名称，作为第一个参数传递这个name，也称为id，是必要的，Pinia 使用它来将 store 连接到 devtools。将返回的函数命名为use...是跨可组合项的约定// defineStore('userInfo',{}) userInfo就是这个仓库的名称nameusername: '赫赫',age: 30,hobby: [
Vue3中的常见组件通信之`pinia`
m0_63165331的博客
06-17 1463
本文详细讲述了pinia的用法。
Vue3状态管理pinia
weixin_44530344的博客
08-21 3568
pinia体积更小（性能更好）可以直接修改状态，不需要和vuex一样，需要mutations才可以修改。
vue3如何使用pinia
07-14
Vue 3 是一个流行的 JavaScript 框架，而 Pinia 是一个基于 Vue 3 的状态管理库。要在 Vue 3 中使用 Pinia，你需要进行以下步骤： 1. 安装 Pinia：你可以使用 npm 或者 yarn 安装 Pinia。 使用 npm： ``` npm install pinia ``` 使用 yarn： ``` yarn add pinia ``` 2. 创建 Pinia 实例：在你的应用程序的入口文件中，创建一个 Pinia 实例。 ```javascript import { createPinia } from 'pinia'; const pinia = createPinia(); ``` 3. 配置 Vue 3：在应用程序的入口文件中，配置 Vue 3 以使用 Pinia。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { pinia } from './pinia'; const app = createApp(App); app.use(pinia); app.mount('#app'); ``` 4. 创建 store：在你的项目中创建一个 store，它将承载你的状态和操作。 ```javascript import { defineStore } from 'pinia'; export const useStore = defineStore('store', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` 5. 在组件中使用 store：在你的组件中使用创建的 store。 ```vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { useStore } from './store'; export default { setup() { const store = useStore(); return { count: store.count, increment: store.increment, }; }, }; </script> ``` 这就是如何在 Vue 3 中使用 Pinia。通过使用 Pinia，你可以更方便地管理应用程序的状态。记得引入相关的依赖，然后按照上述步骤进行操作即可。希望对你有所帮助！
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值