1.pinia介绍 pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。 pinia官方文档 Pinia 的优点 pinia 符合直觉，易于学习。pinia 是轻量级状态管理工具，大小只有1KB.pinia 模块化设计，方便拆分。pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可 以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。支持多个 store。支持 Vue devtools、SSR、webpack 代码拆分。 更多查看文档… 2.pinia基本使用 1.首先先安装依赖 2.在main.js中引入pinia并创建容器挂载到根实例上 3.创建stores文件夹和index.js文件（这个文件以后基本不用管了） 4.在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。 注意：返回的函数统一使用useXXX作为命名方案，这是约定的规矩。例如上面的useCounter 5.然后再组件中使用： 注意：在模板使用 ，不用和vuex一样还要.state,直接点state里面的K 运行效果： 可以用vue3的调试工具看pinia 2.1注意Store获取到后不能解构，否则失去响应式 案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 在 vuex 里面是坚决不允许这样子直接操作 state 数据的，pinia是可以的，看看上面的addCount函数直接操作。 运行结果： 解决方案： pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理 现在数据都是响应式的了 3.修改state的数据 重新新建一个user模块 stores/user.js 组件中修改数据： **第一种方法：**点击按钮修改数据，这种方法是最直接的修改数据 效果：点击也修改了 第二种方法：$patch函数修改 这个方式也可以，效果一样。 第三种方法：$state 方式（这个是替换的方式。）这个基本不用，这里就不多说。可以看查阅文档。 第四种方法：$reset()函数是重置state数据的 新增一个重置按钮： 运行结果：点击了修改数据按钮之后在点重置按钮就恢复原始的数据。 4.getters的使用 getters 类似于 vue 里面的计算属性，可以对已有的数据进行修饰。不管调用多少次，getters中的函数只会执行一次，且都会缓存。 1.最基本的使用 在counter模块演示了，counter模块： 组件中： 运行效果： 这样就是最基本的使用了。 2.一个getter引入另外一个getter couter模块： 组件中使用： 运行效果并且看看打印的this： 3.getters中用别的store中的数据 在counter模块中拿user模块的store数据。 count模块： 注意：要引入user模块 组件中： 运行结果： 注意：我打印了this和store，他们都是当前这这个模块的实例 这样就在counter模块拿到了user模块的数据了。 5. actions的使用 actions 是可以处理同步，也可以处理异步，同步的话相对来说简单一点.actions类似methods 1.先看同步使用： counter模块使用： 在actions定义了两个函数一个加一的函数，一个加20的函数。 组件中： actions函数在组件中使用 运行结果并且看看state是什么 初始值是66，点了一次加1和点了一次加20 注意：state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。 2.异步操作使用 在 actions 处理异步的时候呢，我们一般是与 async 和 await 连用。 counter模块： 这里大致演示，具体还看自己怎么使用。 组件使用： 就这样可以啦！！！ 是不是比vuex简洁很多。。。 6.数据的持久化 pinia支持扩展插件 我们想实现数据持久化 npm i pinia-plugin-persist 效果： 总结 到此这篇关于Vue3中pinia使用的文章就介绍到这了,更多相关Vue3中pinia使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！