Pinia
Pinia
Vue最新的状态管理工具，Vuex的替代品
区别于Vuex
Vuex有五个核心概念：state mutations actions getters modules
Pinia 只需要有三个核心概念：state actions getters
1. actions可以直接修改state；也就是说它既支持异步又能直接修改数据
2. 提供组合式API语法
3. 去掉了modules概念，因为Pinia每一个仓库store都自成一个模块
将来在Pinia创建时，可以创建多个仓库，每一个仓库都是一个独立的整体
将Pinia加入到项目中
其实在实际开发项目的时候，Pinia的配置是可以在项目创建时自动添加的
我们从0开始配一下
- 先使用Vite创建一个空的Vue3项目
npm create vue@latest
效果展示：
- 安装pinia
npm install pinia
- 将pinia添加到项目当中
Pinia的核心概念 — 定义Store
注意：defineStore第一个参数要声明仓库的唯一标识；因为在Pinia当中不同的仓库模块互相独立，那每一个仓库模块都需要有一个唯一标识作为区分
选项式API
组合式API
先来看如何在仓库中提供数据以及如何在页面中使用数据
再来看如何修改数据
效果展示：
基于数据派生的计算属性
目标：希望得到一个数字是当前count的两倍
效果展示：
Pinia — action异步实现
action函数里同步异步都可写；既可直接修改数据，又可以先发个请求，拿到数据之后再去修改上面的数据
需求：在Pinia中获取频道列表数据，并把数据渲染到App组件的模板中
接口地址：geek.itheima.net/v1_0/channels
先安装axios去发请求
npm install axios
封装请求
这里涉及一个对象解构问题
改为
调用
Pinia — storeToRefs方法
从store中解构数据
问题：如果直接对store对象解构里面的数据去使用,会导致数据丢失响应式
为了从store中提取属性时保持其响应性，我们使用Pinia内置的storeToRefs方法
从store中解构方法
方法可以直接解构；eg. const {increment} = store
代码改进：
Pinia — 数据持久化
问题：网页刷新导致数据丢失
持久化配置：
- 安装插件
npm install pinia-plugin-persistedstate
pinia-plugin-persistedstate 插件 兼容pinia 2.0.0（至少要高于2.0.0版本）
- main.js中导入持久化插件
import persist from 'pinia-plugin-persistedstate'
- 将插件添加到pinia实例上
如何开启当前模块的持久化：
创建Store时，将persist选项设为true
- 选项式Store语法：persist:true （于state并列）
- 组合式Store语法：第三参数位置写 {persist:true}
案例：
给counter.js模块加上持久化
看下效果：
刷新，数据还在
1.改的时候往本地存
2.刷新的时候优先从本地获取
对比以下channel模块
刷新一下看看
加上捏
刷新数据还在
扩展：
往本地存的键名，是基于仓库的唯一标识去作为键名往本地存的
如何改这个唯一标识的名字：
默认配置
默认store.$id存的，如果想改，自己配key
localStorage改sessionStorage捏：
指定哪些数据需要被持久化：
完结，撒花🎉
原文地址：https://blog.csdn.net/m0_73557953/article/details/144206115
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！