使用onMounted钩子内的Vue 3 Composition API useRouter()-PHP中文网问答

我想在我的组件中使用 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 })
}

但这不是一个好的解决方案

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 }) } }

全部回复(2)

P粉4690907532023-11-24 09:39:16 2楼

useRouter的API必须在setup中调用，官方文档中有提到。你可以在https://router.vuejs.org/zh/api/#userouter（zh文档提到过）中看到这一点。也许你可以编写这样的代码：

并在设置中调用它：

const checkUserAuth = useCheckUserAuth()

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

希望对您有帮助。

赞 +0

添加回复

P粉8484421852023-11-24 00:28:49 1楼

可组合项应该在设置中直接使用，除非它们的实现允许其他用途，否则需要根据每种情况确定。

由于 checkUserAuth 使用可组合项，这使其成为可组合项，如果需要在已安装的挂钩中使用它，则需要返回一个允许这样做的函数：

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

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

或者，checkUserAuth 不应使用可组合项。 useUserStore 没有可组合项固有的限制，并且 useRouter 可以替换为路由器实例的导入。