# 前言：我相信看这编文章的大部分都是会vuex和pinia其中一个状态管理的，想对比学习另一个。所以我将会从安装->使用->修改状态，每一步进行横向对比学习，这样会更加通俗易懂。如果有某一天忘记了某个地方的写法回头查看一下也起到了笔记的作用。 # 一、pinia详细用法 ## （1）安装pinia ``` yarn add pinia 或者 npm npm install pinia ``` ## （2）创建状态仓库 > - 先得知道 pinia 是用 `defineStore()` 定义的，它的第一个参数要求是一个**独一无二的**名字 > - `defineStore()` 的第二个参数可接受两类值：Setup 函数或 Option 对象。 pinia传入Option对象的核心概念包括： > state: 用来定义一些变量
> getters: 类似于计算属性
> actions：里面是一些方法，在里面可以请求接口操作
``` import {defineStore} from 'pinia' const useUser = defineStore("user",{ state:() => ({ // 用来定义一些变量 mycount: 1, }), getters: { // 类似于计算属性 double: (state) => state.mycount * 2, }, actions: { // 里面是一些方法，在里面可以请求接口操作 increment() { this.mycount++ }, async registerUser(login, password) { // 异步操作 await api.post({ login, password }) } } }) export default useUser ``` ## （3）项目在main.js文件中引入并注册使用在main.js中引用，挂载为全局对象 ``` import { createPinia } from "pinia"; const pinia = createPinia() app.use(pinia) ``` ## （4）获取pinia的变量 > 引入后直接使用即可，对比vuex会方便很多 ``` ``` > 注意：不能对 useUser 进行解构否则会失去响应式，但官方提供了storeToRefs这个方法用来解构，如下所示： ``` // 用官方提供storeToRefs解构 const {mycount} = storeToRefs(useUser) ``` ## （5）更新变量 > 方法一： pinia可以直接修改state里面的变量，这是和vuex区别最大的地方，也是使的pinia使用起来更加灵活方便 ```