我无法从 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

编辑：感谢sophiews指出这一点。

刚刚发现我们有不同的方式来定义Store：Setup Stores

// src/stores/user.js

import { defineStore } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import api from './api.js'

export const useUserStore = defineStore('User', () => { // use function
  const route = useRoute()
  const router = useRouter()
  
  const login = async () => {
    await api.POST('login', {username, password})
    router.replace({name: 'home'})
  }

  return { login } // IMPORTANT: need to return anything we need to expose
})

旧答案

您可以将路由器添加为Pinia 插件

// src/main.js
import { createPinia } from 'pinia'
import { createApp, markRaw } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/HomePage.vue'
import Api from './api.js' // my axios wrapper

const app = createApp(App)

// I usually put this in a separate file src/router.js and export the router
const routes = [ 
  { path: '/', component: HomePage },
]
const router = createRouter({
  history: createWebHistory(),
  routes,
})

const pinia = createPinia()
pinia.use(({ store }) => {
  store.router = markRaw(router)
  store.api = markRaw(Api)
})

app
  .use(pinia)
  .use(router)
  .mount('#app')

然后router和api可用于this

// src/stores/user.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore('User', {
  state: () => ({}),
  actions: {
    async login() {
      await this.api.POST('login', {username, password})
      this.router.replace({name: 'home'})
    }
  }
})

请注意，您不能this.router使用箭头函数进行调用。

login: async () => {
  this.router.replace({name: 'home'}) // error
}

对于打字稿用户，要正确获取this.router和的类型this.api：

// src/global.d.ts
import { Router } from 'vue-router'
import Api from './api'

export { }

declare global {

}

declare module 'pinia' {
  export interface PiniaCustomProperties {
    router: Router,
    api: typeof Api
  }
}

我在 pinia github 上找到了这种方法。 https://github.com/vuejs/pinia/discussions/1092

但我还是不知道如何添加this.route到Pinia。

未来的读者，如果您知道该怎么做，请发表评论。

Answer 2

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

使用路由器文档

使用路由文档

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

路由器文件

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

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

然后在您的 pinia 商店中，您可以导入并使用该文件中的路由器：

import { defineStore } from 'pinia'
import router from './router'

export const myStore = defineStore('myStore', () => {
  // router.push
  // router.replace
})