1. 什么是Pinia
- Pinia是Vue的最新状态管理工具，是Vuex的替代品。
- pinia官网：Pinia | The intuitive store for Vue.js
-
提供更加简单的API（去掉了mutation）
-
提供符合，组合式风格的API（和Vue3新语法统一）
-
去掉了modules的概念，每一个store都是一个独立的模块
-
配合TypeScript更加友好，提供可靠的类型推断
2. 手动添加Pinia到Vue项目
在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加
现在我们初次学习，从零开始：
- 使用Vite创建一个空的Vue3项目
- npm init vite@latest
- 按照官方文档安装 pinia 到项目中
-
yarn add pinia # 或者使用 npm npm install pinia
-
3. Pinia基础使用-计数器案例
3.1 vue2.0 状态管理工具 vuex 使用回顾
- 口诀：下载，引入，注册，对象，注入（挂载）
- 详细使用细节：vue学习笔记（十）——Vuex（状态管理，组件间共享数据）
3.1 vue3.0 状态管理工具 pinia 使用
① 定义store
- 口诀：下载，引入，实例，对象，使用（注册/注入）
-
const 仓库对象 = defineStore(仓库名字（唯一标识）, () => { state, mutations, actions, getters })
-
仓库对象 useCounterStore 命名规范，use开头-仓库名-Store结尾
-
第一个参数为仓库名字，要求是一个独一无二的名字（唯一标识）
-
第二个参数为函数，该函数定义了一些响应式属性和方法，并且返回（return）一个带有我们想暴露出去的属性和方法的对象。
-
state 数据直接申明使用
-
申明 mutations 和 actions，使用普通函数形式申明， mutations 和 actions合二为一
-
申明 getters，基于数据的派生计算属性 computed
②
组件使用store
4. getters实现
Pinia中的 getters 直接使用
computed函数
进行模拟, 组件中需要使用
需要把 getters return出去
5. action异步实现
编写方式：异步action函数的写法和
组件中获取异步数据的写法完全一致
接口地址：http://geek.itheima.net/v1_0/channels
需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中
6. storeToRefs工具函数
使用storeToRefs函数可以辅助保持数据
（state + getter）
的响应式解构
原因： counterStore 以及所有的 store 都是一个用 reactive 包装的对象
要想不丢失响应式，使用 StoretoRef 函数
7. Pinia的调试
Vue官方的
dev-tools 调试工具
对 Pinia直接支持，可以直接进行调试。
vue 官方调试工具版本更新和安装问题：
vue3.0学习笔记（一）——vue3简介与vite脚手架的使用
8. Pinia持久化插件
8.1 使用步骤
- 数据持久化?
- 黑马头条vue2.0项目实战（五）——首页—频道编辑，频道数据持久化功能实现。
- 官方文档：快速开始 | pinia-plugin-persistedstate
使用步骤：
- 安装插件 pinia-plugin-persistedstate
- npm i pinia-plugin-persistedstate
- main.js 使用
- store仓库中，persist: true 开启
8.2 常用配置说明 - 更多配置参考官方文档
该插件的默认配置如下:
- 使用 localStorage 进行存储
- store.$id 作为 storage 默认的 key
- 使用 JSON.stringify/JSON.parse 进行序列化/反序列化
- 整个 state 默认将被持久化
如何你不想使用默认的配置，那么你可以将一个对象传递给 Store 的 persist 属性来配置持久化。
-
key
-
paths
9. 总结
- Pinia是用来做什么的？
- 新一代的状态管理工具，替代vuex
- Pinia中还需要mutation吗？
- 不需要，action 既支持同步也支持异步
- Pinia如何实现getter？
- computed计算属性函数
- Pinia产生的Store如何解构赋值数据保持响应式？
- storeToRefs
- Pinia 如何快速实现持久化？
- pinia-plugin-persistedstate
![易捷OA协同办公系统 ShowPic接口任意文件读取漏洞复现 [附POC]](https://i-blog.csdnimg.cn/direct/32f70d9ec8a141dc8eeae779fb85d1b9.png)
