# Vue3 小菠萝 Pinia使用
作者：互联网
Vue3 Pinia使用
在学习 Vue2 的宝子们一定都知道，在 vue2 版本中，如果想要使用状态管理器，那么一定是集成 Vuex，首先说明一点，Vuex 在 vue3 项目中依旧是可以正常使用的，是 vue 项目的正规军。但是，今天我们学习一下小菠萝，Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia，当然很多公司或者是项目由 vue2 转为 vue3 之后，由于习惯了使用 vuex ，所以说，在 vue3 当中继续使用 vuex 的，也不是少数，都知道就可以，根据实际情况来选择。
什么是 Pinia
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。Pinia 的成功可以归功于他管理存储数据的独特功能，例如：可扩展性、存储模块组织、状态变化分组、多存储创建等。
Pinia 的优点
Pinia 被 vue 纳入正规编制，肯定是有原因的，那 pinia 有啥优点呢，主要是一下几点：
- pinia 符合直觉，易于学习。
- pinia 是轻量级状态管理工具，大小只有1KB.
- pinia 模块化设计，方便拆分。
- pinia 没有 mutations，直接在 actions 中操作 state，通过 this.xxx 访问响应的状态，尽管可以直接操作 state，但是还是推荐在 actions 中操作，保证状态不被意外的改变。
- store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或者是 MapAction 辅助函数，这是在 Vuex 中很常见的。
- 支持多个 store。
- 支持 Vue devtools、SSR、webpack 代码拆分。
相关资料
Pinia 中文网：https://pinia.web3doc.top/
Pinia 安装
安装 pinia 就很简单了，直接命令安装就可以了。
npm install pinia -save
或者
yarn add pinia
Pinia 使用
安装完 pinia ，然后就是使用了，使用的第一步，就是在项目中引入 pinia。
Pinia 导入
首先在 main.js 文件中引入，很简单，不要慌宝子们。
import {createPinia} from 'pinia'
然后，这个 pinia 就在项目中导入了，但是上面是 vue3 的写法哈，我起的这个项目是 vue3 的。
Pinia 是支持 vue2 的，如果是 vue2 的项目，导入的方式是下面的样子：
import {PiniaVuePlugin} from 'pinia'
好的，我们还是以 vue3 来介绍这个 Pinia。
导入的时候是 hook ，我们需要调用一下
const state = createPinia()
调用完成，state 是以插件的形式存在的，所以说最后我们需要在项目使用一下。
app.use(state)
好的，编写完上边这一大堆，我们就实现了在 vue3 项目中导入 pinia 的全部操作。
接下来就可以具体的使用 pinia 了。
Pinia 基本使用
创建 index.ts 文件
使用起来相对简单一些，我们首先在根目录下创建一个 store 文件夹，这个都晓得哈，当年用 vuex 的时候也是这个结构。毕竟 pinia 就是用来替换掉 vuex 的嘛。
创建完 store 文件夹，在里面创建一个 ts 文件，叫做 index.ts 。
编写 index.ts 文件
然后我们开始编写 index.ts 文件。
首先我们先引入 pinia。
import { defineStore } from "pinia";
由于 defineStore 也是一个 hooks ，所以说我们可以直接导出一下。
export const Test = defineStore()
这样子写是会报错的，因为这个 defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间，我们可以写一个枚举再传值。
我们在同级在创建一个名字叫做 store_name.ts 的文件写一个枚举数据导出。
export const enum Names {
TEST = "TEST"
}
然后在 index.ts 文件中引入一下枚举数据，然后传给这个 defineStore。
import { defineStore } from "pinia";
import { Names } from "./store_name";
export const useInfoStore = defineStore(Names.TEST)
ok， 这个样子还是报错的，因为还有其他的参数需要传递，第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。
- state 和之前我们 vuex 里面的写法是不一样的，在 vuex 里面呢，state 是一个对象，但是在 pinia 中，state 必须是一个箭头函数，然后在返回一个对象。
- getters 模块呢，类似于计算属性，是有缓存的，主要是帮助我们修饰一些值。
- actions 呢，类似于 methods，帮助我们做一些同步的或者是异步的操作，提交 state 之类的。
到此完整的 index.ts 文件代码：
import { defineStore } from "pinia";
import { Names } from "./store_name";
export const useInfoStore = defineStore(Names.TEST, {
state: () => {
return {
name: '我是标签：const,Pinia,age,name,state,userInfo,pinia,Vue3,菠萝
来源： https://www.cnblogs.com/wjw1014/p/16528123.html