pinia仓库的了解和使用

再使用之前，我们先对pinia做一个基本了解：Pinia 是一个专门为 Vue.js 应用程序设计的状态管理库。它的目标是提供简单、轻量级且易于使用的状态管理解决方案，使开发者能够更轻松地管理 Vue.js 应用程序中的状态。

简单来说pinia就是在vue3中作为中转站来保存项目中使用到的属性和方法，可以让所有vue组件都能够访问到pinia中的属性和方法。可以用来保存httpAPI或者多个组件共同使用的属性。

接下来就是重点——pinia的使用：

        首先在项目的main.ts中引入pinia：

        //引入pinia

        import pinia from './store'

        //使用pinia

        app.use(pinia)

        如图：

然后就是在项目的store文件夹中创建自己的pinia库，使用项目模板的话会直接找到，自己写的话可以自己创建。

先引入pinia，然后创建一个变量调用defineStore方法，按照如下图所示的写法，将属性、数组、对象等放到return中，例如a:1；方法要写在actions中，如图12行的actions。最后记得暴露出来如第43行。

最后就是在需要的组件中引用：

//首先是引用pinia库

import pinia仓库内定义的名称 from "pinia库的路径"

let 自己起的变量名=pinia仓库内定义的名称()

其中pinia仓库内定义的名称就是上图中第6行的warehoseOne，pinia的路径根据自己的情况来定，自己起的变量名我习惯用useStore。

//然后是使用其中的变量

以我的为例，想要得到pinia中a的值，那么直接打印useStore.a即可。如图所示：

pinia还可以解决因为异步问题导致的返回的数据不可以在script中不可以直接使用的问题，详情见由于异步原因导致在主线中不能直接使用接口返回的数据的解决方式。(vue+TS+Axios)-CSDN博客