使用onMounted鉤子內的Vue 3 Composition API useRouter()

Question

我想在我的元件中使用 useRoute ，該元件在 onMounted 掛鉤中呼叫。 類似的東西

import { checkUserAuth } from '@/common/CheckUserAuth'

onMounted(async () => {
  await checkUserAuth()
})

CheckUserAuth.ts 是：

import { useRouter } from 'vue-router'

const router = useRouter() // here router is undefined

export const checkUserAuth = async () => {
  const userStore = useUserStore()
  const userApi = new UserApi()
  const token = localStorage.getItem(TOKEN_NAME)

  const router = useRouter() // and here too router is undefined

  if (!token) {
    await router.push({ name: LOGIN_PAGE_ROUTE })

    return
  }

  const userData = await userApi.fetchMasterInfo()
  userStore.setUser(userData)
  await router.push({ name: DASHBOARD_ROUTE })
}

我不明白為什麼路由器到處都是未定義的，是否可以在不將路由器作為參數傳遞的情況下解決這個問題？ （我想把checkUserAuth函數完全封裝起來）

我知道我可以修復它

const router = useRouter()

onMounted(async () => {
  await checkUserAuth(router)
})

export const checkUserAuth = async (router: Router) => {
  await router.push({ name: DASHBOARD_ROUTE })
}

但這不是一個好的解決方案

Answer 1

useRouter的API必須在setup中調用，官方文件中有提到。你可以在https://router.vuejs.org/zh/api/#userouter（zh文件提到過）中看到這一點。 也許你可以寫這樣的程式碼：

import { useRouter } from 'vue-router'

export const useCheckUserAuth = () => {
  const userStore = useUserStore()
  const router = useRouter()

  returnv aysnc function checkUserAuth() {
    const userApi = new UserApi()
    const token = localStorage.getItem(TOKEN_NAME)
    if (!token) {
      await router.push({ name: LOGIN_PAGE_ROUTE })
  
      return
    }
  
    const userData = await userApi.fetchMasterInfo()
    userStore.setUser(userData)
    await router.push({ name: DASHBOARD_ROUTE })
  }
}

並在設定中呼叫它：

const checkUserAuth = useCheckUserAuth()

onMounted(() => {
  checkUserAuth()
})

希望對您有幫助。

Answer 2

可組合項應該在設定中直接使用，除非它們的實作允許其他用途，否則需要根據每種情況確定。

由於 checkUserAuth 使用可組合項，這使其成為可組合項，如果需要在已安裝的掛鉤中使用它，則需要傳回一個允許這樣做的函數：

const useUserAuth = () => {
  const router = useRouter()
  const userStore = useUserStore()
  const userApi = new UserApi()

  return {
    async check() {...}
  }
}

或者，checkUserAuth 不應使用可組合項。 useUserStore 沒有可組合項目固有的限制，且 useRouter 可以替換為路由器實例的導入。