Ce qui suit est une réécriture des « pièges du pinia vue3 et d'un exemple d'analyse de code » : "Analyse de vue3 pinia, y compris les pièges et les solutions, combinée avec un exemple de code pour l'analyse."

Installation

yarn add pinia # or npm install pinia

Utilisation

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

Problèmes lors de l'utilisation

Impossible d'accéder à 'useUserStore' avant l'initialisation

Étapes de reproduction

Habituellement, nous déterminerons si l'utilisateur est connecté au hook de routage pour déterminer les autorisations. Par exemple :

// 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')

Cause du problème

Lorsque le code est exécuté de haut en bas, lors de la rencontre de const userStore: any = useUserStore(), le module de statut utilisateur sera obtenu, mais l'application n'a pas encore été montée, donc le statut global de Pinia n'a pas été initialisé. En conséquence, lors de l'initialisation de l'acquisition de l'état du module utilisateur, l'état global n'est pas initialisé, provoquant ainsi le problème actuel.

Solution

Lorsque la fonction de hook de routage obtient le module d'état utilisateur et appelle le hook de routage, cela signifie que l'état global a été entièrement initialisé. Mais cela entraînera l'obtention du module de statut utilisateur à chaque appel du hook de routage, ce qui entraînera un gaspillage de ressources (bien sûr, cela peut atteindre l'objectif attendu, mais ce n'est pas ce dont nous avons besoin). Nous pouvons déclarer une variable dans la couche externe pour stocker l'état et porter un jugement dans le hook de routage. Si la variable actuelle est vide, cela signifie que l'état n'a pas encore été obtenu et que l'état est obtenu dans la situation actuelle ( semblable à un singleton). Code final :

// 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) {
    ...
  }
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!