Pinia：一个Vue的状态管理库

最新推荐文章于 2024-07-09 11:16:25 发布

熊猫发电机hhh

最新推荐文章于 2024-07-09 11:16:25 发布

阅读量928

点赞数 7

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_73739654/article/details/136017356

版权

本文介绍了如何在Vue3应用中使用Pinia进行状态管理，包括安装步骤、创建根存储、定义Store、添加state、actions和getters，以及其基于CompositionAPI的设计特点，如无mutations、扁平化结构和模块隔离。

摘要由CSDN通过智能技术生成

安装Pinia：通过yarn或npm进行安装：

yarn命令：
```
yarn add pinia
```
npm命令：
```
npm install pinia
```
创建根存储：在main.ts中引入Pinia插件，并创建一个根存储。这可以通过创建一个新的index.ts文件，作为Pinia的入口文件，并在其中创建根Store来实现。
定义Store：使用Pinia提供的defineStore()方法来创建一个store，该store用来存放需要全局使用的数据。state是一个函数，返回一个对象，该对象包含应用程序的状态。
使用Store：在Vue组件中，通过import语句导入需要使用的store，然后使用store来获取和修改状态。
添加State：在store中添加state，state是一个函数，返回一个对象，该对象包含应用程序的状态。
创建Actions：在store中创建actions，用于执行异步操作和修改状态。
创建Getters：在store中创建getters，用于计算状态

需要注意的是，Pinia的设计使用的是Composition API，更符合Vue3的设计思维。Pinia没有mutations，只有actions。没有命名空间模块，Pinia的store是扁平化结构，创建的多个store都是相互隔离的，没有嵌套关系。不再需要注入、导入函数。

关注