Я не могу получить доступ к своим маршрутам из магазина 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

у меня неопределенный

Источник

3 ответа

РЕДАКТИРОВАТЬ: Спасибо user13750640 за то, что указали на это.

Только что узнал, что у нас есть другой способ определить 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'})
    }
  }
})

Обратите внимание, что вы не можете вызывать функцию стрелки.

      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в Пинию.

Будущий читатель, пожалуйста, прокомментируйте, если вы знаете, как это сделать.

Источник

useRouteа также useRouterдолжны использоваться в компонентах Vue и, в частности, setupметод или внутрь script setup.

Документы useRouter

useRoute Документы

Если вы хотите получить доступ к routerхотя вы можете просто импортировать его:

файл маршрутизатора

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

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

затем в вашем магазине pinia вы можете просто импортировать маршрутизатор из этого файла:

      import router from './router'

// router.push
// router.replace
// ...
Источник

Вы можете обернуть процесс создания хранилища внутри фабрики/функции, это позволит вам расширить возможности магазинов в соответствии с вашими индивидуальными потребностями. Ниже вы можете видеть, что мы можем создать экземпляр хранилища со ссылкой на клиент urql и объект маршрутизатора. Взглянуть:

Источник
Другие вопросы по тегам