Acceder al estado de Vuex al definir rutas de Vue-Router

Después de investigar en diferentes repositorios y páginas de internet finalmente hemos dado con la resolución que te compartimos ahora.

Solución:

Como se sugiere aquí, lo que puede hacer es exportar su tienda desde el archivo en el que se encuentra e importarla en el rutas.js. Será algo como lo siguiente:

Tú tienes uno tienda.js:

import Vuex from 'vuex'

//init store
const store = new Vuex.Store(
    state: 
        globalError: '',
        user: 
            authenticated: false
        
     ,
     mutations: 
         setGlobalError (state, error) 
             state.globalError = error
         
     
)

export default store

Ahora en rutas.jstu puedes tener:

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from ./store.js

Vue.use(VueRouter)

//define routes
const routes = [
     path: '/home', name: 'Home', component: Home ,
     path: '/login', name: 'Login', component: Login ,
    { path: '/secret', name: 'Secret', component: SecretPage, meta:  requiresLogin: true 
]

Router.beforeEach((to, from, next) => 
    if (to.matched.some(record => record.meta.requiresLogin) && ???) 
        // You can use store variable here to access globalError or commit mutation 
        next("/Login")
     else 
        next()
    
)

En principal.js también puedes importar store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import store from './store.js'

//init app
const app = new Vue(
    router: Router,
    store,
    template: '',
    components:  App 
).$mount('#app')

Terminé sacando la tienda de main.js a store/index.js e importándola al archivo router.js:

import store from './store'

//routes

const routes = [
     path: '/home', name: 'Home', component: Home ,
     path: '/login', name: 'Login', component: Login ,
    { path: '/secret', name: 'Secret', component: SecretPage, meta:  requiresLogin: true 
]    

//guard clause
Router.beforeEach((to, from, next) => 
    if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) 
        store.commit("setGlobalError", "You need to log in before you can perform this action.")
        next("/Login")
     else 
        next()
    
)

Administrar el estado de su ubicación por separado del resto del estado de su aplicación puede hacer que cosas como esta sean más difíciles de lo que deberían ser. Después de lidiar con problemas similares tanto en Redux como en Vuex, comencé a administrar mi estado de ubicación en el interior mi tienda Vuex, usando un router módulo. Es posible que desee pensar en usar ese enfoque.

En su caso específico, puede observar cuándo cambia la ubicación dentro de la propia tienda Vuex y enviar la acción de “redireccionamiento” adecuada, como esta:

dispatch("router/push", path: "/login")

Es más fácil de lo que piensa administrar el estado de la ubicación como un módulo Vuex. Puedes usar el mío como punto de partida si quieres probarlo:

https://github.com/geekytime/vuex-enrutador

valoraciones y reseñas

Finalizando este artículo puedes encontrar las aclaraciones de otros administradores, tú igualmente tienes la opción de insertar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador