Zugriff auf Vuex-Mutatoren in den Navigationswächtern

Question

Ich baue eine App mit Laravel + VueJS. Um einige Routen einzuschränken, benutze ich Navigationshilfen. Das Problem ist, dass ich auf Vuex-Mutatoren zugreifen muss, um zu wissen, ob der aktuelle Benutzer angemeldet ist. Die Sache ist, dass store definiert ist, aber ich kann den Mutator nicht vom Router verwenden. Ich habe diesen Fehler: TypeError: Cannot read property 'commit' of undefined aber wie gesagt, store ist gut definiert. Hat jemand eine Idee? Vielen Dank !

Routen

import Vue from 'vue' 
import Router from 'vue-router' 

import Hello from '@/components/Hello' 
import Register from '@/components/Register' 
import Login from '@/components/Login' 

Vue.use(Router) 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Hello', 
     component: Hello, 
     meta: { 
     showNavigation: true, 
     requireAuthentication: true 
     } 
    }, 
    { 
     path: '/register', 
     component: Register, 
     meta: { 
     showNavigation: false, 
     requireAuthentication: false 
     } 
    }, 
    { 
     path: '/login', 
     component: Login, 
     meta: { 
     showNavigation: false, 
     requireAuthentication: false 
     } 
    } 
    ], 
    mode: 'history' 
}) 

store

import Vue from 'vue' 

import Vuex from 'vuex' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    state: { 
    access_token: null, 
    expires_in: 0 
    }, 
    mutations: { 
    setToken (state, response) { 
     state.access_token = response.body.access_token 
     state.expires_in = response.body.expires_in + Date.now() 
    }, 
    getToken (state) { 
     if (!state.access_token || !state.expires_in) return null 

     if (state.expires_in < Date.now()) this.commit('destroyToken') 

     return state.access_token 
    }, 
    destroyToken (state) { 
     state.access_token = null 
     state.expires_in = 0 
    }, 
    isAuthenticated (state) { 
     return this.commit('getToken') !== null 
    } 
    }, 

    actions: { 
    getOauthToken (context, user) { 
     var data = { 
     client_id: 2, 
     client_secret: 'XXXXXXXXXXXXXXXXXXXXXXXXXX', 
     grant_type: 'password', 
     username: user.email, 
     password: user.password 
     } 

     Vue.http.post('oauth/token', data) 
     .then(response => { 
     context.commit('setToken', response) 
     }) 
    } 
    } 
}) 

main.js

import Vue from 'vue' 
import App from './App' 
import router from './router' 
import { store } from './store' 

import VueResource from 'vue-resource' 
import VeeValidate from 'vee-validate' 

Vue.config.productionTip = false 

Vue.use(VueResource) 
Vue.use(VeeValidate) 

Vue.http.options.root = 'http://codex.app' 

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requireAuthentication)) { 
    console.log(store) 
    console.log(store.commit('isAuthenticated')) 
    if (!store.commit('isAuthenticated')) { 
     next('/login') 
    } else { 
     next() 
    } 
    } else { 
    next() 
    } 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    store, 
    template: '<App/>', 
    components: { App } 
}) 

Answer 1

wenn wir Mutationen begehen, es bezieht sich auf die Änderung des Status und NUR des Status. Wenn Sie komplexere Mutationen benötigen, um den Status zu ändern, verwenden Sie stattdessen Aktionen.