以下は、「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()

使用中の問題

初期化前に「useUserStore」にアクセスできない

再現手順

通常ユーザーがルーティング フックでログインしているかどうかを判断して、権限を決定します。例:

// 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() が発生すると、ユーザーstatus モジュールは取得されますが、アプリケーションはまだマウントされていないため、Ponia のグローバル状態は初期化されていません。その結果、ユーザモジュールのステータス取得を初期化する際に、グローバルステータスが初期化されず、現在の問題が発生しています。

解決策

ルーティング フック関数がユーザー状態モジュールを取得してルーティング フックを呼び出すと、グローバル状態が完全に初期化されたことを意味します。ただし、ルーティング フックが呼び出されるたびにユーザー ステータス モジュールが取得されることになり、リソースの無駄が発生します (もちろん、期待された目的は達成できますが、必要なものではありません)。外層で状態を格納する変数を宣言し、ルーティングフックで判断することができますが、現在の変数が空の場合は状態がまだ取得されていないことを意味し、現状で状態を取得します(シングルトンに似ています)。最終コード:

// 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 中国語 Web サイトの他の関連記事を参照してください。