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这个方法
022019-11-18
相似问题