beforeRouteEnter函数和Vuex问题

Question

在quasar项目中，我有一个Vuex函数“asyncValidateToken”，用于检查用户是否登录到系统。它位于文件“src/store/index.js”中。该文件包含以下代码：

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

import { api } from 'boot/axios'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    state: {
      isLogin: false
    },
    mutations: {
      changeIsLogin (state, payload) {
          state.isLogin = payload;
      }
    },
    actions: {
      asyncValidateToken: async (context, payload) => {
        await api.post('/accounts/token', '', {
          headers: {
              'Authorization': `Bearer ${localStorage.token}`,
            }
        })
        .then(response => {
          if (response.data == localStorage.userId) {
              context.commit('changeIsLogin', true);
              return true;
          } else {
              context.commit('changeIsLogin', false);
              return false;
          }
        })
        .catch(error => {
          context.commit('changeIsLogin', false);
          return false;
        });
      }
    }
  })

  return Store
}

通过函数“beforeRouteEnter”使用路由保护的页面“Results.vue”

<template>
  <q-page class="flex flex-center">
    <div>
      <charts />
      <feedback />
    </div>
  </q-page>
</template>


<script>
import Charts from 'src/components/Charts.vue'
import Feedback from 'src/components/Feedback.vue'
import store from 'src/store/index.js'

export default {
  name: 'Results',
  components: {
    Charts,
    Feedback
  },
  beforeRouteEnter (to, fromR, next) {
    if (store.dispatch('asyncValidateToken')) { 
      next();
    } else { this.$router.push('/login'); }
  }
}
</script>

我得到一个错误“src_store_index_js__WEBPACK_IMPORTED_MODULE_2__.default.dispatch 不是一个函数在 beforeRouteEnter (Results.vue?82a0:23) 在routeEnterGuard (vue-router.esm.js?85f8:2333)”。构造“this.$store.dispatch('asyncValidateToken')”也不起作用。为什么？

Answer 1

尝试

store().dispatch('')

为什么？

因为您的 store.js 模块默认导出一个函数，它 returns 商店。

beforeRouteEnter函数和Vuex问题

beforeRouteEnter function and Vuex problem

vue.js

vuex