Pinia的使用

一.Pinia介绍

1. pinia 和 vuex 具有相同的功效，是 Vue 的存储库，它允许您跨组件/页面共享状态。
2. 设计使用的是 Composition api，更符合vue3的设计思维。
3. Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。
   网址: https://pinia.web3doc.top/

二.Pinia优势

1. Vue2 和 Vue3 都能支持
2. 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
3. 不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
4. TypeScript支持
5. 代码简介，很好的代码自动分割
   总结 : Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript 的完美支持。

三.Pinia的基本使用

1.安装：npm i pinia 或(yarn add pinia)
2.创建根存储（总的状态管理）

3.main.js中引入，全局应用

4.创建用户数据仓库

5.组件中调用数据仓库

四.批量修改state的数据

1.应用state中数据

2.修改数据
（1）单个修改

（2）批量修改


3.actions中批量修改
（1）数据仓库中actions内配置方法（可定义要修改的内容）

（2）在使用组件中定义方法触发

注意：
（1）在组件中定义方法修改由普通解构的来的数据，组件中数据不会变，而数据仓库中数据会改变——原因：普通解构得到的数据可以使用但 没有响应式 能力
（2）利用 Pinia 中的 storeToRefs() 函数，将 state 中的数据变为响应式
（3）批量修改 $patch()方法——对象式与函数式

五.数据重置

1.定义方法 resetStore 执行reset
const resetStore = () => {
store.$reset(); // 重置 state
}

六.数据持久化：缓存数据，刷新不会丢失

1.安装 npm i pinia-plugin-persist
网址： https://seb-l.github.io/pinia-plugin-persist/#vue2
2.引入：根存储(index.js)中引入并使用

3.使用：在（js文件）用户数据仓库中 配置 persist 即可，使用到数据仓库中数据的组件在刷新时，页面不会初始化，数据保留