错误信息:TypeError: Cannot read properties of undefined (reading 'state')
at VueComponent.mappedState (webpack-internal:///./node_modules/_vuex@4.0.2@vuex/dist/vuex.esm-bundler.js:1233:31)
at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3945:27)
at Watcher.evaluate (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4057:23)
at VueComponent.computedGetter [as count] (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6254:17)
at processComputed (chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:3770:24)
at getInstanceState (chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:3615:87)
at getInstanceDetails (chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:3600:12)
at chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:4606:60
at DevtoolsHookable.callHandlers (chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:708:17)
at DevtoolsApi.callHook (chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/backend.js:200:29)
浏览器输出异常,截图如下:
输出异常:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'state')"
found in
---> <Home> at src/views/Home.vue
<App> at src/App.vue
<Root>
错误分析
经过一番查找此错误发现,很多人可能忘记在main.js中引入store.js并挂载在vue实例上,或者state单词写错了
审查了很多遍代码,依然报错,读取不到state中的数据,后来想到可能是版本的问题
此项目是vue2,要使用vuex3才能正常运行,安装的时候没有指定版本,直接装的是最新的vuex版本,因此库版本不一致导致不能正常运行
安装命令,未指定版本:
package.json中依赖如下:
卸载vuex,如下图:
卸载后依赖被移除,package.json中依赖如下:
错误解决
vue和vuex的错误版本依赖,package.json中依赖如下:
安装vuex3:
安装完成后,package.json中依赖如下:
编译运行:
访问上面编译后的地址,登录后,浏览器输出,如下图:
异常已经不再存在,项目可以正常运行。