다음은 'vue3 pinia 함정 및 솔루션 예제 코드 분석'을 다시 작성한 것입니다. '함정과 솔루션을 포함한 vue3 피니아 분석과 분석용 예제 코드가 결합되어 있습니다.'

설치

yarn add pinia # or npm install pinia

Usage

// 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()을 만나면 사용자 상태 모듈을 획득하지만 아직 애플리케이션이 마운트되지 않아 피니아의 글로벌 상태가 되지 않습니다. 초기화되었습니다. 이로 인해 사용자 모듈 상태 획득을 초기화할 때 글로벌 상태가 초기화되지 않아 현재의 문제가 발생하게 됩니다.

Solution

라우팅 후크 기능이 사용자 상태 모듈을 획득하고 라우팅 후크를 호출하면 전역 상태가 완전히 초기화되었음을 의미합니다. 그러나 라우팅 후크가 호출될 때마다 사용자 상태 모듈을 획득하게 되므로 리소스 낭비가 발생합니다(물론 예상한 목적을 달성할 수 있지만 우리에게 필요한 것은 아닙니다). 상태를 저장하기 위해 외부 레이어에 변수를 선언하고 라우팅 후크에서 판단을 내릴 수 있습니다. 현재 변수가 비어 있으면 상태가 아직 획득되지 않았음을 의미하며 현재 상황에서 상태를 획득했습니다. 싱글톤과 비슷합니다.) 최종 코드:

// 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 피니아 분석과 분석용 예제 코드가 결합되어 있습니다.'의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!