1.pinia介绍

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。
依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。
Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。

pinia官方文档

Pinia 的优点

1. pinia 符合直觉，易于学习。
2. pinia 是轻量级状态管理工具，大小只有1KB.
3. pinia 模块化设计，方便拆分。
4. pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
5. store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
6. 支持多个 store。
7. 支持 Vue devtools、SSR、webpack 代码拆分。

更多查看文档…

2.pinia基本使用

1. 首先先安装依赖

npm install pinia

2. 在main.js中引入pinia并创建容器挂载到根实例上

//引入stores暴露出的pinia的实例
import pinia from './stores'createApp(App).use(pinia).mount('#app')

3. 创建stores文件夹和index.js文件（这个文件以后基本不用管了）

import { createPinia } from "pinia";const pinia = createPinia()export default pinia

4. 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）

defineStore 是需要传参数的，

• 第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
• 第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。

//定义关于counter的store
import {defineStore} from 'pinia'/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{state:() => ({count:66,}),getters: {},actions: {}
})//暴露这个useCounter模块
export default useCounter

注意：返回的函数统一使用useXXX作为命名方案，这是约定的规矩。例如上面的useCounter

5. 然后再组件中使用：

注意：在模板使用 ，不用和vuex一样还要.state,直接点state里面的K

运行效果： 可以用vue3的调试工具看pinia

2.1注意Store获取到后不能解构，否则失去响应式

案例需求，点击按钮加一：
一个不解构，一个不解构看看区别。

运行结果并且看看state是什么

初始值是66，点了一次加1和点了一次加20

注意：state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。

2. 异步操作使用

在 actions 处理异步的时候呢，我们一般是与 async 和 await 连用。
counter模块： 这里大致演示，具体还看自己怎么使用。

    state:() => ({count:66,list:[]}),actions:{//大概演示这个异步流程async axiosData(){const res = await fetch("http://-----------------")if(code ==200){//收到数据保存到storethis.list = res.data.listreturn "ok"}}}

组件使用：

就这样可以啦！！！

是不是比vuex简洁很多。。。

6.数据的持久化

pinia支持扩展插件

我们想实现数据持久化

npm i pinia-plugin-persist

export const useUserStore = defineStore({state () {return {count: 0,num: 101,list: [1, 2, 3, 4 ]}},persist: {enabled: true, // 开启缓存  默认会存储在本地localstoragestorage: sessionStorage, // 缓存使用方式paths:[] // 需要缓存键 }
})

效果：

文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。