将吸气剂导入路由器的问题 - Vuex答案

【问题标题】：Problem importing getters into Router - Vuex将吸气剂导入路由器的问题 - Vuex
【发布时间】：2019-10-05 16:33:51
【问题描述】：

将 getter 导入 Rotate - Vuex 时出现问题。

我正在尝试导入 vuex 状态内的值。

报错，说明未定义。

我不知道我做错了什么。请，如果有人可以提供帮助，我将非常感激。

感谢收听

错误类型错误：“_store__WEBPACK_IMPORTED_MODULE_4__.default.getters 未定义”

商店

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './module-auth'

Vue.use(Vuex)
export default function () {
  const Store = new Vuex.Store({
    modules: {
      auth
    },
    strict: process.env.DEV
  })
  return Store
}

模块认证吸气剂

import decode from 'jwt-decode'

function isTokenExpired (state) {
  try {
    const decoded = decode(state.token)
    if (decoded.exp < Date.now() / 1000) {
      return true
    } else return false
  } catch (err) {
    return false
  }
}
export {
  isTokenExpired,
}

路由器

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

Vue.use(VueRouter)

export default function () {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  Router.beforeEach((to, from, next) => {
    const publicPages = ['/']
    const authRequired = !publicPages.includes(to.path)

    const loggedIn = store.getters['auth/isTokenExpired']
    console.log(loggedIn)

    if (authRequired && !loggedIn) {
      return next('/')
    }
    next()
  })
  return Router
}

【问题讨论】：

您的代码看起来不错。错误可能在其他地方。检查导入的 store 是否真的是 store 变量、文件结构等。
感谢收听。我想我找到了问题所在。我需要实例化一个函数，而不是一个对象。有效。 store().getters['auth/isTokenExpired'] 正确吗？
一个对象，而不是一个函数 :)
我无法将此对象加载到索引路由中。显示错误。 =( .store.getters['auth/isTokenExpired'] - 未定义

标签： vue.js vuex vue-router

【解决方案1】：

您的错误是您尝试将函数用作 Vuex 模块。模块应该是一个对象。 Docs说：

export const moduleA = {
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  },

  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

你的函数isTokenExpired 看起来应该放在“getters”部分。

【讨论】：

看起来他知道这一点，并且只分享了模块的 getter 部分。
Error TypeError: "store__WEBPACK_IMPORTED_MODULE_4_.default.getters is undefined" 然后我不知道他为什么会有这个错误。他提供的代码清楚地表明了相反的情况。
感谢收听。我想我找到了问题所在。我需要实例化一个函数，而不是一个对象。有效。 store().getters['auth/isTokenExpired'] 正确吗？
store.getters.something 是正确的。但是为此，您列出导出使用 new Store() 创建的商店对象
如果您发布所有使用过的文件，我们可以更好地了解问题所在。此外，创建一个错误最少的示例很痛苦，但这是学习和查找问题根源的更好方法。

【解决方案2】：

导出一个创建商店的函数并将其用作函数将创建许多商店，这是不需要的。

由于您需要在任何地方使用一个商店实例，您需要导出商店实例，而不是创建商店的函数。

【讨论】：

我无法将此对象加载到索引路由中。显示错误。 =( .store.getters['auth/isTokenExpired'] - 未定义
是的，你可以。请分享一个 repo 以继续调查