vue3?pinia踩坑及解決實例代碼分析

本篇內容主要講解“vue3 pinia踩坑及解決實例代碼分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue3 pinia踩坑及解決實例代碼分析”吧!

安裝

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()

使用中出現的問題

Cannot access 'useUserStore' before initialization

重現步驟

通常我們會在路由鉤子中判斷用戶是否登陸，從而進行權限判斷。如：

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

問題原因

代碼從上往下執行過程中，遇到const userStore: any = useUserStore()，會進行用戶狀態模塊的獲取，但是應用還沒有掛載，所以Pinia的全局狀態還沒有進行初始化。造成了初始化用戶模塊狀態獲取時，全局狀態并沒有初始化，所以造成了當前問題。

解決方案

在路由鉤子函數進行用戶狀態模塊的獲取，調用路由鉤子的時候，意味著全局狀態已完全初始化完成。但會造成每次調用路由鉤子都獲取用戶狀態模塊，會造成資源的浪費（當然可以達到預期目的，但并不是我們需要的）。我們可以在外層聲明一個變量用來存儲狀態，在路由鉤子中進行判斷，如果當前變量為空，也就意味著狀態還沒有進行過獲取，在當前情況下進行狀態獲?。愃朴趩卫?。最終代碼：

// 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踩坑及解決實例代碼分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！