Я не могу получить доступ к своим маршрутам из магазина 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
.
Если вы хотите получить доступ к
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 и объект маршрутизатора. Взглянуть: