Berikut ialah penulisan semula "perangkap pinia vue3 dan analisis kod contoh penyelesaian": "Analisis vue3 pinia, termasuk perangkap dan penyelesaian, digabungkan dengan kod contoh untuk analisis."

Pemasangan

yarn add pinia # or npm install pinia

Penggunaan

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

Masalah semasa penggunaan

Tidak boleh mengakses 'useUserStore' sebelum permulaan

Langkah pengeluaran semula

>

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

Punca masalah

Apabila kod dilaksanakan dari atas ke bawah, apabila

ditemui, modul status pengguna akan diperoleh, tetapi aplikasi belum telah dipasang lagi, jadi Pinia's The global state belum dimulakan lagi. Akibatnya, apabila memulakan pemerolehan status modul pengguna, status global tidak dimulakan, sekali gus menyebabkan masalah semasa. const userStore: any = useUserStore()

Penyelesaian

Apabila fungsi cangkuk penghalaan memperoleh modul status pengguna dan memanggil cangkuk penghalaan, ini bermakna keadaan global telah dimulakan sepenuhnya. Tetapi ia akan menyebabkan modul status pengguna diperolehi setiap kali cangkuk penghalaan dipanggil, yang akan menyebabkan pembaziran sumber (sudah tentu ia boleh mencapai tujuan yang diharapkan, tetapi ia bukan apa yang kita perlukan). Kita boleh mengisytiharkan pembolehubah dalam lapisan luar untuk menyimpan keadaan dan membuat pertimbangan dalam cangkuk penghalaan Jika pembolehubah semasa kosong, ini bermakna keadaan belum diperoleh lagi, dan keadaan diperoleh di bawah situasi semasa (. serupa dengan singleton). Kod akhir:

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

Atas ialah kandungan terperinci Berikut ialah penulisan semula "perangkap pinia vue3 dan analisis kod contoh penyelesaian": "Analisis vue3 pinia, termasuk perangkap dan penyelesaian, digabungkan dengan kod contoh untuk analisis.". Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!