pinia

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。 除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读！

提示：以下是本篇文章正文内容，下面案例可供参考

一、Pinia？

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

二、使用步骤

1.安装

代码如下（示例）：

# 利用vue-cli创建一个pinia项目（这里选择创建vue3项目）
yarn add pinia
# 或者使用 npm
npm install pinia

2.项目中使用 导入pinia

代码如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

该处使用的url网络请求的数据。

---

三、pinia传参与调用

//在状态管理工具中定义addAge函数
actions:{
      addAge(gap){
           this.age+=gap;
      }
 }

//组件中导入对应状态管理工具
import { userTestStore } from "./store";
const store = userTestStore();
const { addAge } = store;//解构出store实例里面的addAge方法

组件中使用

<div>output age:{{ store.age }}</div>
<button @click="addAge(10)">click for add age</button>

四.使用

1.store/counter.js

2.组件中使用

总结

Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展 官方文档 Plugins
Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见
Pinia 的使用感受类似于 Recoil，但没有那么多的概念和 API，主体非常精简，极易上手（Recoil 是 Facebook 官方出品的用于 React 状态管理库，使用 React Hooks 管理状态）
Pinia 2 目前还在 Beta 状态，不建议在生产环境中使用，不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案