Vue + Pinia
category
Web
date
Aug 19, 2022
icon
slug
vue-pinia
status
Published
summary
全局状态管理工具
Pinia.js 有如下特点：
完整的 ts 的支持；
足够轻量，压缩后的体积只有1kb左右;
去除 mutations，只有 state，getters，actions；
actions 支持同步和异步；
代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
无需手动添加 store，store 一旦创建便会自动添加；
支持Vue3 和 Vue2
tags
TypeScript
Pinia
type
Post
起步
安装
注册到vue
使用
初始化Store
- 在
src下新建文件夹store
- 新建文件
index.ts
- 定义仓库
Store
引入
修改值的5个方式
1. 直接修改
2. 批量修改
3. 批量修改函数形式
4. 替换store
5. 通过actions修改
解构store问题
在Pinia是不允许直接解构是会失去响应性的（和vue的
reactive类似）解决方法：
storeToRefs其实就是将store先还原成对象再分别套上ref（其原理跟toRefs一样）Pinia的API
$reset
重置
store到他的初始状态$subscribe
只要有state的值有变化就会走这个函数
$onAction
只要有actions被调用就会走这个函数
Pinia持久化
解决pinia页面刷新状态会丢失的问题
参考链接：