安装
1.安装
yarn add pinia
或者使用 npm
npm install pinia
2.在入口文件main.js引进
image.png
使用一般在store文件夹 创建一个js文件，如：store/counter.js
image.png
isSetupStore写法，使用一个函数（类似于一个组件setup()）来为更高级的用例定义一个 Store：
image.png
组件使用
image.png
完整的store打印出来
image.png
获取state
image.png
改变state
image.png
$patch方法:用于改变state部分对象同时应用多个更改
更改state的值，可以直接修改
image.png
但是 使用这种语法应用某些突变确实很难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合，而且会覆盖原有state本身原有的集合
解决方法：该$patch方法还接受一个函数,函数参数是state，可以部分修改对象和数组等集合，包括删除，添加
image.png
action,直接调用store的actions定义的方法即可
image.png
获取Getter
![]()
image.png
image.png
辅助函数的写法
image.png
通过mapWritableState，直接修改store-state的count值,
image.png
注意：对于读取state的属性，重命名，直接修改重命名的变量，也会改变到state的属性的值
actions方法辅助函数
image.png
pinia的store可以解构
image.png
pinia辅助函数， vue3写法暂时不知道支持不，可以的话后面再补上
$subscribe : 监听store中的state的属性，类似vue3.0的watchEffect subscribe引用到state的属性改变时执行：接收两个参数：fn,options对象
image.png
重新调用subscribe方法：停止订阅
image.png
$onAction:监听action的触发,接收两个参数:fn,options对象
image.png
重新调用unAction方法：停止订阅
image.png
访问其他store:在当前store调用其他store即可
其他store
image.png
自己
image.png
其他用法：可以往pinia内部添加自定义的属性，
如：
image.png
持久化
使用：
yarn add pinia-plugin-persistedstate
或者使用 npm
npm i pinia-plugin-persistedstate
pinia.use(piniaPluginPersistedstate);
image.png
