一、安装pinia
npm i pinia
二、创建src/store/index.ts
import {createPinia} from 'pinia'
let pinia = createPinia()
export default pinia;
三、入口文件中注册使用
import pinia from './store'
app.use(pinia)
四、创建src/store/modules/type/type.ts
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)
if (res.code == 200) {
this.token = (res.token as string)
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';
let useStore = useUserStore()
const loginBtn = async () => {
await useStore.userLogin(loginForm)
}