首頁 > web前端 > Vue.js > 下面是對'vue3 pinia踩坑及解決實例程式碼分析'的重寫: '解析vue3 pinia,包含踩坑與解決方法,結合實例程式碼進行分析。'

下面是對'vue3 pinia踩坑及解決實例程式碼分析'的重寫: '解析vue3 pinia,包含踩坑與解決方法,結合實例程式碼進行分析。'

WBOY
發布: 2023-05-10 08:37:09
轉載
1916 人瀏覽過

安裝

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踩坑及解決實例程式碼分析'的重寫: '解析vue3 pinia,包含踩坑與解決方法,結合實例程式碼進行分析。'的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板