当前位置： 首页 > article >正文

Pinia---新一代的Vuex

article 2024/12/24 2:15:34

关于Pinia的一些问题

pinia是用来做什么的？

  • 集中状态管理工具，新一代的Vuex

Pinia中还需要mutation吗？

  • 不需要，action既支持同步也支持异步

Pinia如何实现getter？

  • computed计算属性函数

Pinia产生的Store如何解构赋值数据保持响应式

  • storeToRefs

什么是Pinia?

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

Pinia相较于Vuex的区别

  1. Pinia提供更加简单的API（去掉了mutation）

  2. 提供符合组合式风格的API（和Vue3新语法统一）

  3. 去掉了modules的概念，每一个store都是一个独立的模块

  4. 搭配Typescript一起使用提供可靠的类型推断

添加Pinia到Vue项目

  1. 使用create-vue创建空的项目：npm init vue@latest

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

使用Pinia实现计数器案例

核心步骤

  1. 定义store(state+action)

  1. 组件使用store

getters实现

  • Pinda中的getters直接使用computed函数进行模拟

  1. 首先定义getter

  2. 并将getter返回出去

3. 调用即可

4. 效果图：

                                                                      

action如何实现异步

  • action中实现异步和组件中定义数据和方法的风格完全一致

storeToRefs

  • 使用storeToRefs函数可以辅助保持数据（state+action）的响应式解构

响应式丢失

  • 直接使用解构赋值的方法会出现响应式丢失，如下图：

解决方法：

  • 使用storeToRefs方法包裹即可保持响应式更新，如下图：

注意：

  • 方法直接从原来的counterStore中解构赋值


http://www.kler.cn/a/448699.html

相关文章：

  • LeetCode429周赛T4
  • 【Java基础面试题016】JavaObject类中有什么主要方法，作用是什么？
  • Mysql复习（二）
  • Go语言封装Cron定时任务
  • 基础爬虫案例实战
  • java 基于冷热数据分离的思想设计LRU链表
  • OpenEuler 22.03 不依赖zookeeper安装 kafka 3.3.2集群
  • 基于微信小程序的短视频系统（SpringBoot）+文档
  • [c++进阶(三)]单例模式及特殊类的设计
  • [python] 基于matplotlib实现雷达图的绘制
  • springboot连接mongo性能优化参数配置
  • 智能汽车自动驾驶发展趋
  • AI 视频：初识 Pika 2.0，基本使用攻略
  • 探索Python的pytest库：简化单元测试的艺术
  • 使用 Vite 和 Redux Toolkit 创建 React 项目
  • YOLOv9-0.1部分代码阅读笔记-autobatch.py
  • ubuntu安装Goland
  • 1-Gin介绍与环境搭建 --[Gin 框架入门精讲与实战案例]
  • 使用Python实现基于AR的教育应用：打破课堂的墙壁
  • AGV搬运机器人推动仓储物流行业向自动化转型升级
  • 医疗 UI 设计如何精准传达复杂的健康数据？
  • 第六篇：HTTP 的未来，会变成啥样？
  • 【记录50】uniapp安装uview插件，样式引入失败分析及解决
  • 王佩丰24节Excel学习笔记——第十六讲：简单文本函数
  • 【设计模式探索——智能遍历：如何用迭代器模式优化AI数据处理】
  • 汇总贴：cocos creator