我想在我的元件中使用 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 }) }
但這不是一個好的解決方案
P粉4690907532023-11-24 09:39:16
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() })
希望對您有幫助。
P粉8484421852023-11-24 00:28:49
可組合項應該在設定中直接使用,除非它們的實作允許其他用途,否則需要根據每種情況確定。
由於 checkUserAuth 使用可組合項,這使其成為可組合項,如果需要在已安裝的掛鉤中使用它,則需要傳回一個允許這樣做的函數:
const useUserAuth = () => { const router = useRouter() const userStore = useUserStore() const userApi = new UserApi() return { async check() {...} } }
或者,checkUserAuth
不應使用可組合項。 useUserStore
沒有可組合項目固有的限制,且 useRouter
可以替換為路由器實例的導入。