Vue3中pinia的基本使用

一. pinia介绍

Pinia是Vue的一个轻量级状态管理库，它最初是为了探索Vuex的下一个版本而开发的，整合了核心团队关于Vuex 5的许多想法。由于其已经实现了Vuex 5中计划提供的大部分内容，最终决定将其作为新的官方推荐。

pinia官方文档

 二. pinia的基本使用

• 首先先安装依赖

yarn add pinia
# 或者使用 npm
npm install pinia

• 创建stores文件夹和index.js文件（这个文件相当于是一个大仓库）

// 引入createPinia
import {createPinia} from 'pinia'
// 对外暴露一个pinia仓库
export default createPinia();

• 在main.js中引入pinia并安装pinia仓库，需要注意的是安装pinia要放在创建app之后

import { createApp } from 'vue'
// 引入pinia仓库
import pinia from '@/store/index'

// 创建app
const app = createApp(App);
// 安装pinia仓库
app.use(pinia);

• 在stores文件夹下创建module文件夹，这个文件夹是用来放小仓库的。比如在module文件夹下创建一个user.ts，如下是基本结构

// 管理用户数据的仓库
import { defineStore } from "pinia";

const useUserStore = defineStore('user',{
    state:():any=>{
        return{
            dialogFormVisible:false,//控制登录对话框的显示与隐藏
        }
    },
    actions:{
        ...
    },
    getters:{
        ...
    }
})

// 对外暴露管理用户数据的仓库
export default useUserStore;

• 然后在组件中使用

// 引入用户仓库
import useUserStore from "@/store/modules/user";

// 创建仓库实例
let userStore = useUserStore();
// 点击登录弹出对话框的回调
const login = () => {
  userStore.dialogFormVisible = true;
};

• 挂一个完整一点的案例

// 管理用户数据的仓库
import { defineStore } from "pinia";
// 引入API
import { reqCode, reqUserLogin } from "@/api/hospital";
// 引入ts类型
import { LoginData, UserLoginResponseData } from '@/api/hospital/type'

const useUserStore = defineStore('user',{
    state:():any=>{
        return{
            dialogFormVisible:false,//控制登录对话框的显示与隐藏
            // 存储用户验证码
            code:'',
            // 存储用户信息
            userInfo: JSON.parse(localStorage.getItem('USERINFO') as string) ||{}
        }
    },
    actions:{
        // 获取验证码的方法
        async getCode(phone:string){
            let result:any = await reqCode(phone);
            if(result.code == 200){
                this.code = result.data
                return 'ok'
            }else{
                return Promise.reject(new Error(result.message))
            }
        },
        // 用户登录获取用户信息的方法
        async userLogin(LoginData:LoginData) {
            let result: any = await reqUserLogin(LoginData)
            if(result.code == 200){
                this.userInfo = result.data;
                // 存储为本地数据  存储的别名要是全大写
                localStorage.setItem('USERINFO', JSON.stringify(this.userInfo))
                return 'ok'
            }else{
                return Promise.reject(new Error(result.message))
            }
        },
        // 退出登录的方法
        logout(){
            // 清空pinia仓库的数据
            this.userInfo = {phone:'',code:''}
            // 清空本地数据
            localStorage.removeItem('USERINFO')
        },
        // 判断授权是否成功
        queryState(){
            // 开启定时器:每过一段时间就查看本地是否有用户信息
            let timer = setInterval(()=>{
                if (localStorage.getItem('USERINFO')){
                    // 有用户信息表示授权成功,关闭对话框
                    this.dialogFormVisible = false
                    // 存储仓库的用户数据
                    this.userInfo = JSON.parse(localStorage.getItem('USERINFO') as string)
                    // 清除定时器
                    clearInterval(timer);
                }
            },1000)
        }
    },
    getters:{

    }
})

// 对外暴露管理用户数据的仓库
export default useUserStore;

 三. 文章推荐

Vue3中的pinia使用（收藏版）_vue3-pinia的使用《三》-CSDN博客

还有更多更复杂的使用，详细可以多看看官方文档定义 Store | Pinia