报错
Vue2项目中报错:
[Vue warn]: Error in render: “TypeError: Cannot read property ‘state’ of undefined”
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘dispatch’ of undefined”
常见原因
这个错误提示通常出现在 Vue 组件中,它尝试读取 Vuex store 的 state 对象,但是该对象没有被定义。这可能是由以下几个原因引起的:
1.Vuex store 模块没有正确导入。可以在 Vue 组件中使用以下代码导入store:
import store from '@/store'
这假设 store.js 文件位于 src/store 目录中。如果store.js 文件位于其他目录中,请相应地更改导入路径。
2.组件没有正确连接到 Vuex store。可以在 Vue 组件中使用以下代码将组件连接到 Vuex store:
import { mapState } from 'vuex'export default {computed: {...mapState(['myState'])}}
这里的 myState 是Vuex store 中定义的状态名称。如果组件中使用其他名称,请相应地更改代码。
3.Vuex store 中没有定义所需的状态。
如果 Vuex store 中没有定义尝试使用的状态,则会出现这个错误。可以在 store.js 文件中使用以下代码定义状态:
const state = {myState: null}
解决方法
反复确认代码后,发现并没有上述问题。所以想着看一下是不是版本问题,打开package.json一看vuex是4版本的。
这就好解决了:
运行以下命令卸载 Vuex 4:
npm uninstall vuex
运行以下命令安装 Vuex 3:
npm install vuex@3