Pinia零基础入门：10分钟学会状态管理

最新推荐文章于 2025-12-18 18:33:19 发布
原创 最新推荐文章于 2025-12-18 18:33:19 发布 · 334 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    设计一个极简的Pinia入门示例，展示最基本的counter功能。要求：1) 创建store定义 2) 实现增加/减少/重置方法 3) 在组件中显示状态和调用方法 4) 添加简单的CSS样式。代码注释要详细，每个步骤都给出解释说明。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

示例图片

作为一个Vue新手，最近在项目里遇到了组件间状态共享的难题，发现用props层层传递太麻烦。朋友推荐了Pinia——这个Vue官方推荐的状态管理库。试了之后发现确实简单又好用，今天就来分享我的学习笔记，带大家10分钟快速上手。

1. 为什么选择Pinia

Pinia是Vue的轻量级状态管理方案，相比Vuex更符合组合式API的设计理念。它有几个明显的优点：

  • 类型推断友好，对TypeScript支持极佳
  • 去掉了很多Vuex中复杂的mutations概念
  • 模块化设计，每个store都是天然隔离的
  • 体积小巧，压缩后只有1KB左右

2. 环境准备

在开始前需要确保项目已经初始化并安装Vue3。如果还没创建项目，可以通过命令行工具快速搭建一个Vue项目。

安装Pinia非常简单，只需要在项目目录下运行安装命令即可。安装完成后，在main.js中引入并使用Pinia插件。

3. 创建第一个store

我们来创建一个经典的计数器store，包含三个基本功能：增加、减少和重置。

  1. 首先新建一个stores目录，在里面创建counter.js文件
  2. 使用defineStore方法定义store，第一个参数是store的唯一ID
  3. 在state中定义初始状态
  4. 在actions中添加修改状态的方法

这个store的结构非常清晰：state存放数据，actions存放方法，getters计算派生状态（我们这个简单示例暂时不需要）。

4. 在组件中使用store

创建好store后，在组件中使用只需要几个简单步骤：

  1. 导入我们创建的store
  2. 在setup中使用store
  3. 从store中解构出需要的状态和方法
  4. 在模板中绑定状态和事件

Pinia的一个便利之处是，解构出来的状态和方法可以直接在模板中使用，并且保持响应式。

5. 添加简单样式

为了让计数器看起来更美观，我们可以添加一些基础CSS样式：

  • 设置按钮的边距和圆角
  • 为数字显示添加背景色
  • 添加悬停效果增强交互感

这些样式可以直接写在组件的style标签中，也可以使用CSS预处理器。

6. 开发中的小技巧

在实践过程中，我发现几个有用的技巧：

  • 使用storeToRefs可以保持解构的响应式
  • 调试时可以通过浏览器插件查看store状态
  • 大型项目建议按功能拆分多个store
  • 可以很方便地实现store间的组合和复用

7. 常见问题解决

新手可能会遇到一些典型问题：

  1. 状态更新但视图不更新：可能是直接修改了state而没有通过actions
  2. 方法调用无效：检查是否遗漏了括号
  3. 类型错误：确保正确配置了TypeScript

8. 进阶方向

掌握基础后，可以继续学习：

  • 使用getters计算派生状态
  • 实现store间的相互调用
  • 结合路由做状态持久化
  • 与服务端数据交互

Pinia的API设计非常简洁，文档也很完善，这些进阶功能学习起来都很顺畅。

体验建议

我在学习过程中使用InsCode(快马)平台做了很多尝试，它的在线编辑器可以直接运行Vue项目，还能一键部署查看效果，特别适合新手快速验证想法。

示例图片

Pinia上手简单但功能强大，是Vue开发现代化的重要工具。希望这篇指南能帮你快速入门，在实际项目中享受状态管理的便利！

快速体验

  1. 打开 InsCode(快马)平台 https://www.inscode.net
  2. 输入框内输入如下内容： 
    设计一个极简的Pinia入门示例，展示最基本的counter功能。要求：1) 创建store定义 2) 实现增加/减少/重置方法 3) 在组件中显示状态和调用方法 4) 添加简单的CSS样式。代码注释要详细，每个步骤都给出解释说明。
  3. 点击'项目生成'按钮，等待项目生成完整后预览效果

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Vue3实战入门：从零打造多计数器管理器（附本地存储 + 响应式设计）
2402_87628679的博客
10-02 1590
本文介绍了如何用Vue3构建一个多计数器管理应用，适合初学者掌握Vue3核心概念。项目包含计数器增减、删除、重置以及数据持久化等功能，采用组件化开发模式，使用Composition API管理状态。主要内容包括：1. 技术选型（Vue3、TailwindCSS、localStorage）；2. 两种开发环境搭建方式（CDN快速启动和Vite工程化）；3. 核心组件实现（CounterItem和CounterManager）；4. 关键知识点如ref/reactive、props/emits、computed
【2024新版】3小时学会Vue3 零基础入门到实战开发 AI智能编程开发 移动端小程序端web前端都有讲 vite+pinia+axios+elementplus
编程小石头
09-06 2320
学习Vue 3可以为你打开多种开发可能性，以下是一些主要的应用领域：小程序开发： 借助uniapp可以开发微信，抖音，支付宝小程序等。。。企业级应用：Vue 3的响应式和模块化特性使其非常适合开发复杂的企业级应用。动态数据可视化： Vue 3可以结合D3.js等库，用于创建动态的数据可视化和图表。内容管理系统（CMS）： Vue 3可以用来开发CMS，例如博客平台、新闻网站等。电子商务平台： 利用Vue 3，可以开发功能丰富的电子商务网站和应用。教育和在线学习平台： Vue 3可以用来构建在线课程、教育工具
零基础入门：10分钟学会Vue拖拽功能开发
GoldenleafRaven13的博客
12-10 358
作为一个刚接触Vue的新手，我通过vue-draggable这个库快速实现了拖拽效果，整个过程比想象中简单许多。这里要注意的是，Vue3的组件注册方式和Vue2有所不同，可以采用全局注册或局部注册两种方式。在掌握基础拖拽后，可以尝试更复杂的功能：跨列表拖拽、拖拽克隆、限制拖拽方向等。vue-draggable都提供了相应的props配置，比如group属性可以实现跨列表拖拽，clone属性可以控制是否复制元素。默认的拖拽样式可能比较简陋，可以通过CSS添加过渡动画、拖拽时的阴影效果、放置区域的视觉反馈等。
vue2-manage快速开始：零基础入门企业级后台开发
gitblog_01070的博客
09-09 939
你还在为如何搭建企业级后台系统而烦恼吗？面对复杂的技术栈和繁琐的配置步骤，是否感到无从下手？本文将带你从零开始，以vue2-manage为案例，一步步掌握基于Vue.js和Element UI的后台管理系统开发，让你在1小时内具备独立搭建企业级后台的能力。 读完本文你将获得： - 掌握vue2-manage项目的完整搭建流程 - 理解Vue+Element UI后台系统的核心架构 - 学会配置开...
第1课:零基础入门前端框架：3 个新手闭眼学的高友好度选择
2503_94434664的博客
12-18 1149
摘要： 对于前端新手，推荐从Vue.js入门，因其渐进式设计、中文文档友好和贴近原生语法，适合快速上手。掌握基础后可学习React拓展就业面，需补足ES6基础并优先掌握核心概念。轻量级框架Svelte适合体验极简开发，而Angular适合进阶学习企业级开发。新手应避免同时学多个框架，优先完成小项目（如TodoList）巩固基础，原生JS/HTML/CSS能力才是长期竞争力。
✍️【Vue3入门指南】零基础也能10分钟上手的前端框架！
2402_82610107的博客
05-06 618
哈喽小伙伴们！今天我们来聊聊一个超火的前端框架——Vue3！即使你是编程小白，看完这篇也能自己写出第一个Vue程序啦~ （๑•̀ㅂ•́）و✧。
vue3入门教程，一站学会全套vue！
wawu_moment的博客
10-24 1179
参考：https://cn.vuejs.org/guide/reusability/custom-directives.html监视基本类型，直接写数据名，监视其value值的改变。监视对象类型，直接写数据名，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。注意：若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。
Vue从入门到精通：我的学习全记录
lpx2005的博客
12-10 770
文档中的示例代码非常直观，我边读边动手练习，比如用`v-bind`、`v-model`、`v-for`等指令实现数据绑定和列表渲染。接下来我打算学习Vue 3的深度特性（如Teleport、Suspense），并尝试用Vue + Node.js全栈开发一个完整的应用。同时，我也会关注Vue生态的新工具，如Nuxt.js等。通过拆分一个“TODO列表”应用，我实践了父子组件通信，并学会了使用`$emit`和`v-on`。最后，我将项目构建为静态文件，并部署到GitHub Pages，体验了完整的开发流程。
一文掌握vue3基础，适合自学入门案例丰富
2401_87092242的博客
05-20 1839
本文从Vue3的基础语法出发，全面系统的介绍了Vue3的核心概念与应用，旨在帮助自学者更轻松地掌握Vue3。文章内容由浅入深，从通过CDN引入Vue3开始，逐步介绍了组合式API、模块化开发、以及常见的Vue3指令和功能并从单个html的使用过渡到vite项目工程，案例丰富，总结编者学习经验，适合自学vue3。
前端开发Vue 3入门教程：涵盖环境搭建、核心语法、组件化开发与状态管理详解
07-23
③学会使用Vue Router进行页面导航和Pinia进行状态管理。; 阅读建议：此教程不仅提供了详细的步骤指导，还附有大量示例代码，建议读者边学边练，动手实践每个步骤，并参考提供的学习资源加深理解。
Vue开发基础实验：前端交互功能实现与插件应用
通过完成这一系列任务，学习者不仅能掌握Vue的基本语法，更能建立起组件化、模块化、可复用的现代前端开发意识，为后续学习路由（Vue Router）、状态管理（Pinia/Vuex）乃至构建工具（Vite/Webpack）打下坚实基础。
Web全栈学习指南：HTML、Vue与JavaScript快速入门
无论你是零基础入门者，还是已有经验希望查漏补缺的开发者，都能从中获得系统性的指导和实战参考。尤其“web-tips-master”这一命名暗示其来源于GitHub等平台的开源仓库，意味着内容持续更新、社区活跃、案例丰富，...
布线问题 分支限界算法-下载即用.zip
01-01
下载方式：https://pan.quark.cn/s/a4b39357ea24 布线问题（分支限界算法）是计算机科学和电子工程领域中一个广为人知的议题，它主要探讨如何在印刷电路板上定位两个节点间最短的连接路径。 在这一议题中，电路板被构建为一个包含 n×m 个方格的矩阵，每个方格能够被界定为可通行或不可通行，其核心任务是定位从初始点到最终点的最短路径。 分支限界算法是处理布线问题的一种常用策略。 该算法与回溯法有相似之处，但存在差异，分支限界法仅需获取满足约束条件的一个最优路径，并按照广度优先或最小成本优先的原则来探索解空间树。 树 T 被构建为子集树或排列树，在探索过程中，每个节点仅被赋予一次成为扩展节点的机会，且会一次性生成其全部子节点。 针对布线问题的解决，队列式分支限界法可以被采用。 从起始位置 a 出发，将其设定为首个扩展节点，并将与该扩展节点相邻且可通行的方格加入至活跃节点队列中，将这些方格标记为 1，即从起始方格 a 到这些方格的距离为 1。 随后，从活跃节点队列中提取队首节点作为下一个扩展节点，并将与当前扩展节点相邻且未标记的方格标记为 2，随后将这些方格存入活跃节点队列。 这一过程将持续进行，直至算法探测到目标方格 b 或活跃节点队列为空。 在实现上述算法时，必须定义一个类 Position 来表征电路板上方格的位置，其成员 row 和 col 分别指示方格所在的行和列。 在方格位置上，布线能够沿右、下、左、上四个方向展开。 这四个方向的移动分别被记为 0、1、2、3。 下述表格中，offset[i].row 和 offset[i].col（i=0,1,2,3）分别提供了沿这四个方向前进 1 步相对于当前方格的相对位移。 在 Java 编程语言中，可以使用二维数组...
EP1C3T144C8 FPGA开发板设计
01-01
先看效果： https://pan.quark.cn/s/03f8ba0ff118 ### FPGA开发板设计相关知识要点#### 1. FPGA基本概念- **定义**: 现场可编程门阵列（Field Programmable Gate Array, FPGA）属于半定制型集成电路，允许在完成制造后通过编程来设定其内部逻辑及连接配置，从而达成特定的功能实现。- **特性**: - 运行速度快 - 功耗相对较低 - 适用于复杂系统构建 - 可在现场进行重新编程- **应用范畴**: - 通信领域 - 自动控制系统 - 信息处理技术 - 数据加密方案 - 视频处理技术 - 车载电子系统 - 医疗器械设备等#### 2. EP1C3T144C8芯片介绍- **生产商**: Altera Corporation（现归属于Intel公司）- **系列归属**: Cyclone系列- **技术工艺**: 1.5V核心供电电压，采用0.13微米制造工艺- **资源参数**: - 包含2910个逻辑单元（LEs） - 提供高达59904位的嵌入式存储器 - 支持单个PLL（Phase Locked Loop，锁相环） - 最多可支持104个用户I/O接口- **优点**: - 价格经济 - 集成度高 - 片上资源丰富 - 灵活性强#### 3. 硬件电路设计原理##### 3.1 硬件电路整体构造- **构成部分**: - 下载电路: 负责将设计好的程序传送至FPGA中。 - 下载接口: 实现个人计算机与FPGA之间的数据交换。 - FPGA核心部件: EP1C3T144C8芯片。 - 电源电路: 提供必要的电源支持。 - 扩展接口: 用于连接各类传感器或扩展模块。###...
HIT-CSAPP2025大作业报告.doc
最新发布
01-01
HIT-CSAPP2025大作业报告.doc
NTC热敏电阻温度测量技术及线性电路
01-01
下载前必看：https://pan.quark.cn/s/9cf3e6e84d3a ntc-temperature-measurement NTC 热敏电阻温度测量原理、电路设计与代码实现 ！ ！ ！ 目前只是Test Board版本，后续更新硬件改进后的版本！ ！ ！ ntc-temperature-measurement/ ├── 32K闪存增强通用型MCU CH32V005 - 南京沁恒微电子股份有限公司 #Internet快捷方式 CH32V005官网网址 ├── CH32V006DS0.PDF # CH32V006/V005 数据手册 ├── CH32V00XRM.PDF # CH32V00X 应用手册 ├── zhca858a.pdf # TI参考文档：利用 NTC 电路感测温度 ├── Temp Measurement Design.ms14 # 参考TI的设计的电路 ├── 103F3950阻值对照表.doc # NTC电阻手册 ├── 阻值对照温度数据_0.1℃精度.txt ├── NTC/ # MounRiver工程 │ ├── NTC.wvproj # 工程WVPROJ文件 │ └── ......
VC++对话框背景图片设置
01-01
源码来自：https://pan.quark.cn/s/a4b39357ea24 在VC++开发过程中，对话框（CDialog）作为典型的用户界面组件，承担着与用户进行信息交互的重要角色。 在VS2008SP1的开发环境中，常常需要满足为对话框配置个性化背景图片的需求，以此来优化用户的操作体验。 本案例将系统性地阐述在CDialog框架下如何达成这一功能。 首先，需要在资源设计工具中构建一个新的对话框资源。 具体操作是在Visual Studio平台中，进入资源视图（Resource View）界面，定位到对话框（Dialog）分支，通过右键选择“插入对话框”（Insert Dialog）选项。 完成对话框内控件的布局设计后，对对话框资源进行保存。 随后，将着手进行背景图片的载入工作。 通常有两种主要的技术路径：1. **运用位图控件（CStatic）**：在对话框界面中嵌入一个CStatic控件，并将其属性设置为BST_OWNERDRAW，从而具备自主控制绘制过程的权限。 在对话框的类定义中，需要重写OnPaint()函数，负责调用图片资源并借助CDC对象将其渲染到对话框表面。 此外，必须合理处理WM_CTLCOLORSTATIC消息，确保背景图片的展示不会受到其他界面元素的干扰。 ```cppvoid CMyDialog::OnPaint(){ CPaintDC dc(this); // 生成设备上下文对象 CBitmap bitmap; bitmap.LoadBitmap(IDC_BITMAP_BACKGROUND); // 获取背景图片资源 CDC memDC; memDC.CreateCompatibleDC(&dc); CBitmap* pOldBitmap = m...
Docker拉取镜像报错解决[项目源码]
01-01
文章详细介绍了在Docker拉取镜像时遇到的`no such host`错误的解决方法。首先，需要修改`/etc/resolv.conf`文件，注释掉原有的nameserver并添加新的nameserver 8.8.8.8。其次，在`/etc/NetworkManager/NetworkManager.conf`文件的[main]部分添加dns=none配置。最后，重启Docker服务以应用更改。文章还提到，该方法同样适用于解决`connect: network is unreachable`的错误。
Watt Toolkit加速器（steam++加速器）
01-01
Watt Toolkit（原名 Steam++）是一款开源免费、支持 Windows、macOS、Linux、Android、iOS 等多平台的全能游戏工具箱，它以本地反向代理技术为核心，既能定向优化 Steam、Epic、Uplay 等十余款游戏平台的网络环境，解决社区、创意工坊访问卡顿或 - 118 错误等问题，提升游戏下载与浏览速度，又集成了多账号切换、本地加密存储令牌、交易批量确认、游戏成就管理、云存档编辑、自动挂卡、无边框窗口化、自动领取 Epic 周免游戏等丰富实用功能，其代码托管于 GitHub、Gitee，全程无隐藏收费与恶意插件，操作简洁直观，无需复杂配置即可一键启用，是兼顾便捷性与安全性的游戏玩家必备工具。
Pinia快速入门：Vue3状态管理的高效解决方案
本文档《day12-Pinia入门.pdf》系统地介绍了 Pinia 的核心概念、安装配置流程以及在实际项目中的基础应用方法，重点围绕状态管理的核心功能展开，包括 store 的定义与使用、state 状态管理、getters 计算属性的实现...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

GoldenleafRaven13

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

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

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

打赏作者

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

抵扣说明：

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

余额充值