Vue3普通登录业务的封装

Pinia管理登录状态
（1）可以方便地在不同的组件之间共享和维护用户认证信息；
（2）同时利用其持久化特性保持用户登录状态，提高用户体验。

//在src/store/index.ts下创建大仓库，这样设置之后就可以在组件中使用 Pinia 来管理状态了。
import { createPinia } from "pinia"  //导入pinia
let pinia = createPinia()   //创建pinia实例
export default pinia	//到处pinia实例
//注意，记得在入口文件引入仓库

在组件中，点击登录触发按钮触发login方法，login方法中通知仓库调用接口发起登录请求，但是这里有个问题，组件怎么知道这个请求成功了没有呢，所以使用async-await来得到Promise对象，而仓库中也响应地返回Promise成功或失败。

//用户仓库
let userStore = useUserStore()
const login = async() => {
    //点击登录按钮后，通知仓库发请求，请求成功跳转到首页，请求失败弹出失败信息
    try{
        await userStore.userLogin(loginForm)
        $router.push('/')
        ElNotification({
            type:'success',
            message:'登录成功'
        })
    }catch{
        ElNotification({
            type:'error',
            message:'登录失败，请检查用户名或密码'
        })
    }
}

在仓库中，发起请求后，将登录成功的token通过localStorage实现本地存储，当然也可以使用persist插件。

//在src\store\modules\user.ts创建user相关的小仓库
import {defineStore} from 'pinia'
let useUserStore = defineStore('User',{
    //数据
    state:()=>{
        return {
            token:localStorage.getItem('TOKEN'), //从本地存储获取token
        }
    },
    //异步/逻辑
    actions:{
        //用户登录的方法
        async userLogin(loginForm:loginForm){
            let result:any =await reqLogin(loginForm)
            if(result.code==200){
                this.token = result.data.token;
                //本地持久化存储
                localStorage.setItem('TOKEN',result.data.token)
                //async函数返回成功的promise,组件才能判断
                return 'ok'
            }else{
                return Promise.reject(new Error(result.data.message))
            }
        }
    },
    getters:{

    }
})
//对外暴露小仓库
export default useUserStore