快捷導(dǎo)航

vue3 pinia踩坑及解決方案詳解

更新時(shí)間：2023年03月06日 10:10:11 作者：黑狼傳說(shuō)

這篇文章主要為大家介紹了vue3 pinia踩坑及解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

安裝

yarn add pinia # or npm install pinia

用法

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

使用中出現(xiàn)的問(wèn)題

1、Cannot access 'useUserStore' before initialization

重現(xiàn)步驟

通常我們會(huì)在路由鉤子中判斷用戶(hù)是否登陸，從而進(jìn)行權(quán)限判斷。如：

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

問(wèn)題原因

代碼從上往下執(zhí)行過(guò)程中，遇到const userStore: any = useUserStore()，會(huì)進(jìn)行用戶(hù)狀態(tài)模塊的獲取，但是應(yīng)用還沒(méi)有掛載，所以Pinia的全局狀態(tài)還沒(méi)有進(jìn)行初始化。造成了初始化用戶(hù)模塊狀態(tài)獲取時(shí)，全局狀態(tài)并沒(méi)有初始化，所以造成了當(dāng)前問(wèn)題。

解決方案

在路由鉤子函數(shù)進(jìn)行用戶(hù)狀態(tài)模塊的獲取，調(diào)用路由鉤子的時(shí)候，意味著全局狀態(tài)已完全初始化完成。但會(huì)造成每次調(diào)用路由鉤子都獲取用戶(hù)狀態(tài)模塊，會(huì)造成資源的浪費(fèi)（當(dāng)然可以達(dá)到預(yù)期目的，但并不是我們需要的）。我們可以在外層聲明一個(gè)變量用來(lái)存儲(chǔ)狀態(tài)，在路由鉤子中進(jìn)行判斷，如果當(dāng)前變量為空，也就意味著狀態(tài)還沒(méi)有進(jìn)行過(guò)獲取，在當(dāng)前情況下進(jìn)行狀態(tài)獲取（類(lèi)似于單例）。最終代碼：

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

以上就是vue3 pinia踩坑及解決方案詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 pinia踩坑解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: