javascript - 访问导航守卫中的 Vuex 更改器(mutator)

Question

我正在使用 Laravel + VueJS 构建一个应用程序。为了限制一些路线，我使用了导航守卫。问题是我需要访问 Vuex 更改器(mutator)才能知道当前用户是否已登录。问题是 store 已定义，但我无法使用路由器中的更改器(mutator)。我收到此错误:TypeError:无法读取未定义的属性“commit”，但正如我所说，store 定义良好。有人有主意吗？谢谢!

路线

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'
})

商店

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)
      })
    }
  }
})

ma​​in.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

当我们提交突变时，它指的是更改状态并且仅更改状态。当您需要更复杂的突变来更改状态时，请使用操作。