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组合式写法

相关推荐
_AaronWong9 小时前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode9 小时前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户54330814419410 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo10 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
恋猫de小郭10 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木10 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮10 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati10 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉10 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain
wuhen_n10 小时前
双端 Diff 算法详解
前端·javascript·vue.js