Cannot read property 'fileName' of undefined"

来源:4-2 阅读器解析和渲染

qq_七花八落_0

2019-11-16

Cannot read property ‘fileName’ of undefined"

在EbookReader.vue文件中(内容如下):

import { mapGetters } from 'vuex'
// import Epubjs from 'epubjs'
export default {
  computed: {
    ...mapGetters(['fileName'])
  },
  mounted() {
    this.$store.dispatch('setFileName', this.$router.params.fileName.split('|').join('/')).then(() => {
      this.initEpub()
    })
  },
  methods: {
    initEpub() {
      const url = 'https://localhost:8085/epub/' + this.fileName + '.epub'
      console.log(url)
    }
  }
} 

保存后控制台报如下错误:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'fileName' of undefined"

found in

---> <EbookReader> at src/components/reader/EbookReader.vue
       <Index> at src/views/reader/index.vue
         <App> at src/App.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6340
patch @ vue.runtime.esm.js?2b0e:6559
Vue._update @ vue.runtime.esm.js?2b0e:3942
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
run @ vue.runtime.esm.js?2b0e:4548
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4304
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4396
update @ vue.runtime.esm.js?2b0e:4538
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ vue-router.esm.js?8c4f:2748
eval @ vue-router.esm.js?8c4f:2747
updateRoute @ vue-router.esm.js?8c4f:2174
eval @ vue-router.esm.js?8c4f:2037
eval @ vue-router.esm.js?8c4f:2159
step @ vue-router.esm.js?8c4f:1843
step @ vue-router.esm.js?8c4f:1850
step @ vue-router.esm.js?8c4f:1850
runQueue @ vue-router.esm.js?8c4f:1854
eval @ vue-router.esm.js?8c4f:2154
step @ vue-router.esm.js?8c4f:1843
eval @ vue-router.esm.js?8c4f:1847
eval @ vue-router.esm.js?8c4f:2139
eval @ vue-router.esm.js?8c4f:1886
eval @ vue-router.esm.js?8c4f:1962
Promise.then (async)
eval @ vue-router.esm.js?8c4f:1909
eval @ vue-router.esm.js?8c4f:1930
eval @ vue-router.esm.js?8c4f:1930
flatMapComponents @ vue-router.esm.js?8c4f:1929
eval @ vue-router.esm.js?8c4f:1865
iterator @ vue-router.esm.js?8c4f:2120
step @ vue-router.esm.js?8c4f:1846
step @ vue-router.esm.js?8c4f:1850
step @ vue-router.esm.js?8c4f:1850
runQueue @ vue-router.esm.js?8c4f:1854
confirmTransition @ vue-router.esm.js?8c4f:2147
transitionTo @ vue-router.esm.js?8c4f:2034
init @ vue-router.esm.js?8c4f:2739
beforeCreate @ vue-router.esm.js?8c4f:1203
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4213
Vue._init @ vue.runtime.esm.js?2b0e:4998
Vue @ vue.runtime.esm.js?2b0e:5079
eval @ main.js?56d7:12
./src/main.js @ app.js:1170
__webpack_require__ @ app.js:791
fn @ app.js:151
1 @ app.js:1220
__webpack_require__ @ app.js:791
checkDeferredModules @ app.js:46
(anonymous) @ app.js:931
(anonymous) @ app.js:934
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'fileName' of undefined
    at VueComponent.mounted (EbookReader.vue?9c41:15)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4213)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6340)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6559)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3942)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.run (vue.runtime.esm.js?2b0e:4548)

关于Vuex的配置如下:

import Vue from 'vue'
import Vuex from 'vuex'
import reader from './modules/reader'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    reader
  }
})

关于router的配置如下:

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

Vue.use(Router)

export default new Router({
  use_query_string: true,
  routes: [
    {
      path: '/',
      redirect: '/reader'
    },
    {
      path: '/reader',
      component: () => import('@/views/reader/index.vue'),
      children: [
        {
          path: ':fileName',
          component: () => import('@/components/reader/EbookReader.vue')
        }
      ]
    }
  ]
})
`

关于main.js的配置如下:

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

import '@/assets/styles/icon.css'
import './assets/fonts/daysOne.css'
import '@/assets/styles/global.scss'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

其中Vue的版本是2.6.10,vue-router是3.1.3,vuex是3.0.1

请问上述错误如何解决?

写回答

1回答

慕斯0315010

2019-11-16

你这个报错应该是vuex里 module文件的getters配置的问题,报错是说你getters里找不到filename这个方法

0
2
Sam
回复
qq_七花八落_0
好的,666
2019-11-18
共2条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构,完整项目流程

1610 学习 · 1951 问题

查看课程