我无法从Pinia Vuejs3商店访问我的路线

问题描述

我无法从商店访问我的路线。 对此可能有一个很好的解释。 我使用Vuejs3和Pinia

我的商店：

import {defineStore} from 'pinia'
import {useRoute} from "vue-router";


type navigationState = {
    selectedNavigationItem: INavigationItem | null,
    selectedNavigationPage: INavigationPage | null,
}

export const useNavigationStore = defineStore('navigationStore', {
    state: () => ({
        /**
         * when the user clicks on an element of the navbar we store the navigation item here
         */
        selectedNavigationItem: null,
        /**
         * when the user clicks on an element of the sidebar we store the navigation page here
         */
        selectedNavigationPage: null,
    } as navigationState),
    actions: {

        /**
         * Set Selected navigation page
         * @param navigationPage
         * @type INavigationPage
         */
        setSelectedNavigationPage(navigationPage: INavigationPage | null) {
            console.log(useRoute())
            this.selectedNavigationPage = navigationPage
        },
    },
})

当我像在方法setSelectedNavigationPage中那样执行控制台日志时

我有一个未定义的

推荐答案

useRoute和useRouter必须在Vue组件中使用，特别是setup方法或script setup内部。

useRouter Docs

useRoute Docs

如果要访问router，只需将其导入即可：

路由器文件

import { createRouter, createWebHistory } from 'vue-router'

export const router = createRouter({
  history: VueRouter.createWebHistory(),
  routes: [/* ... */]
})

然后在您的Pinia商店中，您只需从该文件导入路由器：

import router from './router'

// router.push
// router.replace
// ...