vue3 Pinia详解使用详解

原创 已于 2024-05-22 16:55:35 修改 · 3.7k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #状态管理 #vuex #pinia

于 2024-04-11 15:01:39 首次发布

文章目录


在这里插入图片描述

1. Pinia 是什么

  1. Pinia 是 Vue 的专属的 最新状态管理库
  2. 是 Vuex 状态管理工具的替代品和 Vuex 一样为 Vue 项目提供共享状态管理工具
  3. 并且支持vue2和vue3，主要是为vue3提供状态管理，支持typescript
  4. Pinia可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。管
    理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API

2. Pinia 功能作用

  1. 提供更加简单的API （去掉了 mutation ）
  2. 提供符合组合式风格的API （和 Vue3 新语法统一）
  3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
  4. 配合 TypeScript 更加友好，提供可靠的类型推断

3. 手动添加Pinia到Vue项目

Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始： 2.1 使用 Vite 创建一个空的TS + Vue3项目

npm create vite@latest vue-pinia-ts -- --template vue-ts

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

cnpm i pinia

4. Pinia基础使用

  1. 在 src 中定义一个 stores 文件夹，新建 counter.ts 文件
  2. counter.ts 组件使用 store
import {
   
    defineStore } from 'pinia'
import {
   
    ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
   
   
    // 数据（state）
    const count = ref(0
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue3 状态管理 - Pinia，超详细讲解！
共同学习，共同成长
06-18 2513
哈喽，大家好，我是码喽的自我修养！今天给大家分享【Vue3 状态管理 - Pinia】，超详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
【vue3】Pinia使用
aaaa_aaab的博客
08-17 1259
Pinia 是一个用于 Vue.js 应用程序的状态管理库。这个库提供了一个简单且直观的 API 来管理 Vue.js 应用程序的状态。Pinia 是作为 Vue.js 官方状态管理库 Vuex 的一种轻量级替代方案而创建的。它的目标是提供一个更加简单和灵活的 API，同时还保留 Vuex 的主要功能，如状态管理、动作和获取器。
Vue3中插槽, pinia的安装和使用(超详细教程)
2301_77140685的博客
05-21 1186
插槽是指, 将一个组件的代码片段, 引入到另一个组件。
【Vue3】（三）vue3中的pinia状态管理、组件通信方式及总结、插槽
最新发布
io_123io_123的博客
06-08 1423
本文总结了Vue3中的8种组件通信方式： Pinia状态管理库，提供轻量级状态管理方案； Props实现父子组件双向数据传递； 自定义事件实现子向父通信； Mitt工具库实现跨组件通信； v-model实现表单数据双向绑定； $attrs实现祖孙组件通信； $refs/$parent实现父子组件实例访问； provide/inject实现跨层级组件通信。 每种方式都包含原理说明、使用场景和代码示例，也重点介绍了Pinia的安装配置、状态管理以及与其他方式的对比。文章强调了不同通信方式的适用场景和注意事项。
Pinia详解
猫老板的豆
06-25 1959
Pinia官网Pinia的设计灵感来源于Vuex，但相比Vuex，Pinia更加轻量级、简单易用和灵活。Pinia 是 Vuex 的进化版本，由 Vue 核心团队维护，并推荐用于新项目。Vuex 的未来：Vue 官方已明确表示，Pinia 的实现对 Vuex 5 的提案有直接影响（Vuex 5 的提案已冻结，Pinia 成为事实上的“Vuex 5”Pinia是一个基于Vue 3的状态管理库，专为Vue 3设计。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。
Pinia的基本使用
qq_44505797的博客
04-27 1万+
(官网解释)一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。我们可以把这三个概念理解为vue组件中的“数据”data、“计算”computed和“方法”methods。store简单来说就是数据仓库的意思，我们数据都放在store里面。
vue3中的pinia的使用方法
陈二狗的博客
10-29 2755
Pinia在Vue 3中的使用方法
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的使用
gcyaozuodashen的博客
05-19 3699
getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。在 vuex 里面是坚决不允许这样子直接操作 state 数据的，pinia是可以的，看看上面的addCount函数直接操作。注意：返回的函数统一使用useXXX作为命名方案，这是约定的规矩。第三种方法：$state 方式（这个是替换的方式。**第一种方法：**点击按钮修改数据，这种方法是最直接的修改数据。在actions定义了两个函数一个加一的函数，一个加20的函数。这样就在counter模块拿到了user模块的数据了。
Vue3入门 - Pinia使用（替代Vuex）
觉醒法师的专栏
09-10 3730
在创建项目时，一般会有选项可以选择是否安装Pinia，选择是即可。如果创建项目里错过了也没关系，通过命令安装即可。pinia是Vue的存储库，它允许您跨组件/页面共享状态。它Vuex的替代品，其功能和性能更优于vuex，在后期使用中会逐渐被大家发现。这里我们先使用pinia全局存储用户信息、接口访问令牌、菜单列表等数据，当然这些只是作为一个项目的基础部分，其他共享信息可根据你们的项目需求进行添加。
Vue3项目开发时，选择Vuex还是Pinia？详解，常见场景，常见
繁若华尘的博客
02-25 1060
在 Vue3 开发中，选择 Vuex 还是 Pinia 需要根据项目需求、技术栈和开发习惯综合考量。以下是两者的核心区别、适用场景及常见问题的解决方案
Vue3，Pinia与TypeScript面试题总结
weixin_50406024的博客
04-29 1309
使用的选项式语法，Pinia 会自动推断类型，但可以显式 定义类型以增强类型安全。// 1. 定义 State 的接口（可选，但推荐）// 2. 定义 Store// State（显式标注类型）users: [],}),// Getters（自动推断返回类型）getters: {// 示例：过滤用户// 带参数的类型标注},},// Actions（显式标注参数和返回类型）actions: {try {page=${thisimport {
从零开始：用 Vue 3 和 Pinia 构建简单购物车应用
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-24 508
产品列表展示：用户可以看到所有商品。添加到购物车：点击商品后，添加到购物车。购物车查看与更新：用户可以查看购物车中的商品，修改数量，或删除商品。结算模拟：显示购物车总金额。状态管理：使用 Pinia 管理购物车状态和操作。组件拆分：将逻辑按功能拆分到不同组件中。事件通信：父子组件之间通过props和事件传递数据。响应式绑定：使用v-model实现用户交互的双向绑定。如果你想进一步优化，可以添加本地存储支持、API 接口集成或页面路由，构建更加完善的购物体验！
Vue3 使用 pinia
weixin_46515691的博客
10-08 1923
Pinia是 Vue 的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。
前端｜Vue Vue3中使用Pinia，保姆级教程
weixin_47192158的博客
05-16 1万+
在状态管理中，"store"是一个全局对象，用来保存和管理应用的状态。在Pinia中，store是响应式的，这意味着当store中的状态改变时，依赖这些状态的组件会自动更新。每个Pinia store都是一个独立的实体，包含其自己的状态、getters和actions。在store中定义state，可以将它看作是组件的data选项。return {count: 0getters是store的计算属性，用来派生出一些状态。
vue3中pinia用法
L_15737525552的博客
11-01 5862
相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。我感觉这种形式写着更方便简单。也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的。2.创建文件 store/index.js。1.在main.js中。
Vue3如何使用pinia
weixin_48698452的博客
03-15 1225
Vue3如何使用pinia
Vue3 状态管理之 Pinia 的使用
m0_67402341的博客
03-06 4997
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MuxYBwXS-1646496904674)(https://pinia.vuejs.org/logo.svg#pic_center)] Vue3 新的发展方向（来源于尤大知乎） Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本 基于 Vite 的极速构建工具链 <script setup> 带来的开发体验更丝滑的组合式 API 语法 Volar 提供的单文件组件 TypeScript
Vue3中使用Pinia详解
九仞山的专栏
06-12 2万+
详细介绍了Vue3中使用Pinia做全局状态管理的使用
vue3 pinia的作用
09-02
Vue3 Pinia是一种新的状态管理工具，类似于Vuex。它的作用是帮助开发者更好地管理应用程序的状态。与传统的Vuex不同，Pinia在Vue3中使用了Composition API来实现状态管理。Pinia具有以下特点： 1. 更好的类型支持：Pinia使用了TypeScript，能够提供更好的类型定义和自动补全，减少了开发中的错误和调试时间。 2. 更简洁的API：Pinia提供了简洁的API来定义和使用store，使用起来更加直观和方便。 3. 更好的性能：Pinia采用了更精细的状态管理机制，能够更高效地跟踪和响应状态的变化，提升了应用程序的性能。 要使用Vue3 Pinia，首先需要安装并注册Pinia。可以通过npm来安装Pinia，并在main.ts文件中引入并注册Pinia实例。然后，可以使用pinia.use()方法来添加插件，类似于全局中间件的概念。通过这些步骤，就可以开始使用Pinia来管理应用程序的状态了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3 pinia详解](https://blog.csdn.net/CxZzzE/article/details/129659441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Q_Q 忙里偷闲

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

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

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

打赏作者

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

抵扣说明：

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

余额充值