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

Question

我无法从商店访问我的路线。这可能有一个很好的解释。我使用 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 方法中执行控制台日志时

我有一个未定义的

Answer 1

useRoute并且useRouter必须在 Vue 组件中使用，特别是在setupmethod 或 inside 中script setup。

使用路由器文档

使用路由文档

---

如果你想访问router它，你可以简单地导入它：

路由器文件

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

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

然后在您的 pinia 商店中，您可以简单地从该文件中导入路由器：

import router from './router'

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