vue3 pinia踩坑及解決方案詳解

更新時間：2023年03月06日 10:10:11 作者：黑狼傳說

這篇文章主要為大家介紹了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)的問題

1、Cannot access 'useUserStore' before initialization

重現(xiàn)步驟

通常我們會在路由鉤子中判斷用戶是否登陸，從而進(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')

問題原因

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

解決方案

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

// 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踩坑解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue-router路由簡單案例介紹
本篇文章主要介紹了vue-router路由的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
vue 檢測用戶上傳圖片寬高的方法
這篇文章主要介紹了vue 檢測用戶上傳圖片寬高的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Vue-cli3生成的Vue項目加載Mxgraph方法示例
這篇文章主要介紹了Vue-cli3生成的Vue項目加載Mxgraph方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當(dāng)數(shù)據(jù)變化時通知視圖更新
2022-08-08
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
el-table在彈窗中的使用示例詳解
本文總結(jié)了在Vue2項目中使用element-ui的el-table組件在彈窗中展示數(shù)據(jù),并實現(xiàn)基礎(chǔ)的勾選功能,內(nèi)容包括如何設(shè)置row-key、使用reserve-selection屬性、修改數(shù)據(jù)獲取函數(shù)以支持跨頁勾選以及如何在關(guān)閉彈窗時清理selection,感興趣的朋友跟隨小編一起看看吧
2024-12-12
vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法
這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法,store是一個狀態(tài)管理工具,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
vue 組件簡介
這篇文章主要介紹了vue組件的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue中使用element-ui進(jìn)行表單驗證的實例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗證的實例代碼，本文給大家分享實現(xiàn)思路，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決
使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯位、對不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07