Kapitel 3 Pinia-Konfiguration hinzugefügt

1. Was ist Pinia?

Pinia ist wie Vuex auch eine Zustandsverwaltungsbibliothek für Vue. Als Ersatz für Vuex hat sich Pinia von hinten entwickelt und ist zum bevorzugten Statusverwaltungstool für Entwickler geworden

Zweitens die Verwendung von Pinia

Erstellen Sie im Projektverzeichnis  src/stores eine neue  index.ts Datei als Eingabedatei von Pinia und erstellen Sie den Root-Store

npm install pinia

Erstellt mit der Store-Datei (index.ts)

import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"

// pinia persist
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia;

Eingeführt in der Datei main.ts

import { createPinia } from 'pinia' 

const pinia = createPinia()
const app = createApp(App)
app.use(pinia) 

Für das Daten-Caching klassifizieren Sie nach dem Erstellen des Modulordners die Module, zum Beispiel: 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')
})

Erstellen Sie index.ts, nachdem Sie den Schnittstellenordner im Stores-Ordner erstellt haben

export interface UserState {
  ticket: string;
  orgId: number;
  trainingId: number;
  userId: string;
  studentPhone: string | number;
}

3. Datenspeicherung und -abruf

Speichern Sie Daten dort, wo sie gespeichert werden müssen, und nutzen Sie die Dateien

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 || ""