一、什么是Pinia
Pinia与Vuex一样,也是Vue的状态管理库。作为Vuex的代替者,Pinia后来居上,已经成为了开发者首选的状态管理工具
二、Pinia的使用
在项目的 src/stores
目录下,新建一个 index.ts
文件作为Pinia的入口文件,并创建根Store
npm install pinia
在创建的跟Store文件(index.ts)
import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
// pinia persist
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia;
在main.ts文件引入
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
进行数据缓存,创建modules文件夹后进行分类模块,例如:user.ts
import type { UserState } from '@/stores/interface'
import { defineStore } from "pinia"
import piniaPersistConfig from "@/config/piniaPersist";
// import piniaPersistConfig from '@/config/piniaPersist'
export const useUserStore = defineStore({
id: 'user',
state: (): UserState => ({
ticket: '',
orgId: 0,
trainingId: 0,
userId: '',
studentPhone: ''
}),
getters: {},
actions: {
// Set Ticket
setTicket(ticket: string) {
this.ticket = ticket
},
// Set setUserId
setUserId(userId: string) {
this.userId = userId
},
setOrgId(orgId: number) {
this.orgId = orgId
},
setTrainingId(trainingId: number) {
this.trainingId = trainingId
},
setStudentPhone(studentPhone: number) {
this.studentPhone = studentPhone
}
}
// persist: piniaPersistConfig('user')
})
在stores文件夹创建interface文件夹后创建index.ts
export interface UserState {
ticket: string;
orgId: number;
trainingId: number;
userId: string;
studentPhone: string | number;
}
三、进行数据的存和取
在需要存的地方进行数据存储,和在用的文件进行获取
import { useUserStore } from '@/stores/modules/user'
useUserStore().setTicket(data.token)
useUserStore().setOrgId(data.orgId)
useUserStore().setTrainingId(data.trainingId)
useUserStore().setUserId(data.userId)
useUserStore().setStudentPhone(data.studentPhone)
import { useUserStore } from '@/stores/modules/user'
const userStore = useUserStore()
const ticket = userStore.ticket || ""