Vue3 学习 4

pinia

集中式状态(数据)管理 redux vuex pinia

准备一个效果

第一部分Count:

第二部分LoveTalk:

App.vue呈现:

搭建pinia环境

存储+读取数据

1.Store是一个保存:状态、业务逻辑的实体,每个组件都可以读取、写入 它。

2.它有三个概念:state、getter、action,相当于组件中:data、computed和methods

3.具体编码:



修改数据(三种方式)


storeToRefs

  • 借助于storeToRefs将store中的数据转为ref对象,方便在模板中使用
  • 注意:pinia提供的storeToRefs只会将数据做转换,而vue的toRefs会转换为store中数据

getters

1.概念:当state中的数据,需经过处理后再使用,可以使用getters配置

2.追加getters配置

$subscribe的使用

store组合式写法

相关推荐
子兮曰3 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖3 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神3 小时前
github发布pages的几种状态记录
前端
阿蒙Amon5 小时前
TypeScript学习-第10章:模块与命名空间
学习·ubuntu·typescript
AI绘画哇哒哒5 小时前
【干货收藏】深度解析AI Agent框架:设计原理+主流选型+项目实操,一站式学习指南
人工智能·学习·ai·程序员·大模型·产品经理·转行
不像程序员的程序媛5 小时前
Nginx日志切分
服务器·前端·nginx
北原_春希5 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS5 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊5 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜5 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts