No puedo acceder a mis rutas desde la tienda. Puede haber una buena explicación para esto. Yo uso Vuejs3 y Pinia
Mi tienda :
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 }, }, })cuando hago un registro de consola como en el método setSelectedNavigationPage
tengo un indefinido
useRoute y useRouter deben usarse en los componentes de Vue y específicamente en el método de setup o en script setup interno. Sin embargo, si desea acceder al router , simplemente puede importarlo:
archivo de enrutador
import { createRouter, createWebHistory } from 'vue-router' export const router = createRouter({ history: createWebHistory(), routes: [/* ... */] })luego en su tienda pinia puede importar y usar el enrutador desde ese archivo:
import { defineStore } from 'pinia' import router from './router' export const myStore = defineStore('myStore', () => { // router.push // router.replace })Puede envolver el proceso de creación de instancias de una tienda dentro de una fábrica/función, esto le permitirá expandir las capacidades de las tiendas con respecto a sus necesidades personalizadas. A continuación, puede ver que podemos crear una instancia de una tienda que hace referencia al cliente urql y al objeto del enrutador. Echar un vistazo:
export class StoreManager { static _instances: any[] = []; public static spawnInstance( id: string, storeType?: EStoreType, clientHandle?: ClientHandle, routerHandle?: Router, ) { if (StoreManager._instances.find((i) => i.id === id)) { const store = StoreManager._instances.find((i) => i.id === id).instance; return store; } else { const store = StoreManager.initStore( id, storeType, clientHandle ?? null, routerHandle ?? null, ); StoreManager._instances.push({ id: id, instance: store, storeType: storeType, }); return store; } } public static initStore( id: string, storeType: EStoreType, clientHandle: ClientHandle | null, routerHandle: Router | null, ) { const baseState = { _meta: { storeType: storeType, isLoading: true, }, _client: clientHandle, _router: routerHandle, }; const baseActions = { async query(query: any, variables: any[] = []) { // use urql client }, }; const baseGetters = { storeType: (state) => state._meta.storeType, getCurrentRoute: (state) => { if (!state._router) { throw new RouterNotSetException( `This store does not have a router set up`, ); } return state._router.currentRoute.fullPath.replace('/', ''); }, }; switch (storeType) { case EStoreType.DEFAULT: return defineStore({ id: `${id}`, state: () => ({ ...baseState, }), actions: { ...baseActions, }, getters: { ...baseGetters, }, }); default: throw new StoreTypeNotFoundException( `Expected valid 'EStoreType', got ${storeType}`, ); } } }Dentro de su VueComponent, se generaría una instancia de tienda como esta:
const store = StoreManager.spawnInstance( uuidv4(), EStoreType.DEFAULT, useClientHandle(), useRouter(), )();