Pinia 状态管理库

文章目录

• 准备一个效果
• [搭建 pinia 环境](#搭建 pinia 环境)
• [用 pinia 存储+读取数据](#用 pinia 存储+读取数据)
• 修改数据的三种方式
• storeToRefs
• getters的使用

---

提示：以下是本篇文章正文内容，下面案例可供参考

pinia 对比 Vuex 简洁、简单一点

集中式状态（数据）管理

多个组件共享数据考虑用pinia

准备一个效果

Count.vue代码：

App.vue组件代码：

LoveTalk.vue组件代码

安装axios发请求：

npm i axios

还需要一个库:

npm i nanoid

搭建 pinia 环境

npm i pinia

在main.ts中：

用 pinia 存储+读取数据

·src文件夹下新建文件夹store

把下面的count.ts想象成一个仓库，只要跟统计相关的全放在里面

在Count.vue组件引入上面的仓库

土味情话组件也是一样：

修改数据的三种方式

计数count 组件：

actions：涉及到复杂代码复用

storeToRefs

getters的使用

第一种写法

第二种写法

第三种写法

呈现：