vue中的pinia

Pinia是什么？

Pinia是vue的专属状态库，允许开发者跨组件或页面共享状态，他是一个拥有组合式API的Vue状态管理库，支持vue2和vue3，有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。。

Pinia的使用

• 使用npm包管理工具安装：npm install pinia
• 在main.js中创建一个 pinia 实例 (根 store) 并将其传递给应用，如下所视：

• 在src目录下创建一个stores文件夹，里面创建一个js文件，作为一个存储库

defineStore第二个参数传入Option对象

与 Vue 的选项式 API 类似，我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象

• 存储库中的代码如下：

defineStore第二个参数传入Setup 函数

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 Setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

• 组件中使用store

上面代码我们访问shore中的函数或者数据都要使用 store. 会麻烦，我们可以使用解构的形式将我们需要的数据提取出来：

注意：本文是接收在vue3<script setup>使用pinia

插件

由于有了底层 API 的支持，Pinia store 现在完全支持扩展。以下是你可以扩展的内容：

    为 store 添加新的属性

    定义 store 时增加新的选项

    为 store 增加新的方法

    包装现有的方法

    改变甚至取消 action

    实现副作用，如本地存储

    仅应用插件于特定 store

插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。

关于插件的更多用法可以查看官网：Pinia插件

希望本片文章能够帮助大家快速入门pinia，感谢大家的观看！