Das Folgende ist eine Neufassung von „vue3 Pinia-Fallstricke und Lösungsbeispielcode-Analyse“: „Analyse von vue3 pinia, einschließlich Fallstricken und Lösungen, kombiniert mit Beispielcode zur Analyse.“

Installation

yarn add pinia # or npm install pinia

Verwendung

// user.ts
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    ...
  }),
  actions: {
    ...
  }
})
// components.vue
import { useUserStore } from '@/store/user'
const userStore = useUserStore()

Probleme während der Verwendung

Kann vor der Initialisierung nicht auf „useUserStore“ zugreifen

Reproduktionsschritte

Normalerweise ermitteln wir, ob der Benutzer im Routing-Hook angemeldet ist, um die Berechtigungen zu ermitteln. Zum Beispiel:

// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
const userStore: any = useUserStore()
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  // TODO 判断是否登录
  if (userStore.name) {
    ...
  }
})
// main.ts
const app = createApp(App)
app.use(createPinia())
import router from './router'
import '@/permission'
app.use(router)
app.mount('#app')

Ursache des Problems

Wenn der Code von oben nach unten ausgeführt wird und auf const userStore: any = useUserStore() stößt, wird das Benutzerstatusmodul abgerufen, aber die Anwendung wurde noch nicht gemountet, sodass der globale Status von Pinia nicht vorhanden war initialisiert. Dies führt dazu, dass bei der Initialisierung der Statuserfassung des Benutzermoduls der globale Status nicht initialisiert wird, was das aktuelle Problem verursacht.

Lösung

Wenn die Routing-Hook-Funktion das Benutzerstatusmodul abruft und den Routing-Hook aufruft, bedeutet dies, dass der globale Status vollständig initialisiert wurde. Dies führt jedoch dazu, dass bei jedem Aufruf des Routing-Hooks das Benutzerstatusmodul abgerufen wird, was zu einer Verschwendung von Ressourcen führt (natürlich kann es den erwarteten Zweck erreichen, aber es ist nicht das, was wir brauchen). Wir können eine Variable in der äußeren Schicht deklarieren, um den Status zu speichern und im Routing-Hook eine Beurteilung vorzunehmen. Wenn die aktuelle Variable leer ist, bedeutet dies, dass der Status noch nicht abgerufen wurde und der Status unter der aktuellen Situation abgerufen wird. ähnlich einem Singleton). Endgültiger Code:

// permission.ts
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
import router from './router'
import { useUserStore } from './store/user'
let userStore: any = null
router.beforeEach(async(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  if (userStore === null) {
    userStore = useUserStore()
  } 
  // TODO 判断是否登录
  if (userStore.name) {
    ...
  }
})

Das obige ist der detaillierte Inhalt vonDas Folgende ist eine Neufassung von „vue3 Pinia-Fallstricke und Lösungsbeispielcode-Analyse“: „Analyse von vue3 pinia, einschließlich Fallstricken und Lösungen, kombiniert mit Beispielcode zur Analyse.“. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!