Vue3中使用Pinia存储数据并发送请求

一、安装pinia

npm i pinia

二、创建src/store/index.ts

// 仓库
import {createPinia} from 'pinia'
// 创建仓库
let pinia = createPinia()
export default pinia;

三、入口文件中注册使用

// 引入pinia
import pinia from './store'
app.use(pinia)

四、创建src/store/modules/type/type.ts

// 登录接口data类型定义
export interface loginDataTs {
    username:string,
    password:string
}
// 登录接口返回数据的类型定义
export interface loginResponseDataTs {
    code:number,
    msg:string,
    token:string,
    userInfo:any
}

五、创建src/store/modules/user.ts模块化pinia

// 创建用户相关的小仓库
import { defineStore } from 'pinia'
// 引入接口
import { LoginApi,getUserInfoApi ,logoutApi} from '@/api/users/index.ts'
// 引入数据类型
import { loginDataTs ,loginResponseDataTs } from '@/api/users/type'
import type { UserStateTs } from '@/store/modules/types/type'
// 创建小仓库
let useUserStore = defineStore('User', {
    // 存储数据的地方
    state: ():UserStateTs => {
        return {
            token: localStorage.getItem('token'),//用户唯一标识
            userInfo:''
        }
    },
    // 异步逻辑的地方
    actions: {
        // 登录请求
        async userLogin(data: loginDataTs) {
            let res:loginResponseDataTs = await LoginApi(data)
            // 登录成功：200->token
            // 登录失败：->登录失败错误信息
            if (res.code == 200) {
                // 存入state
                this.token = (res.token as string)
                // 持久化存储token
                let token:string = JSON.stringify(res.token)
                localStorage.setItem('token',(token as string))
                return Promise.resolve(res.msg)
            }else{
                return Promise.reject(res.msg)
            }
        }
    },
    getters: {

    }
})

export default useUserStore

六、组件中使用

// 引入相关的小仓库
import useUserStore from '@/store/modules/user.ts';
// 使用pinia仓库
let useStore = useUserStore()
// 登录按钮事件
const loginBtn = async () => {
        // 向pinia里面触发函数发起登录请求
        await useStore.userLogin(loginForm)
    }