第三章 Pinia配置添加

一、什么是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 || ""