关于vue项目在使用vuex的时候,this.$store报错undefined的问题

vue.runtime.esm.js?c320:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'state')。
这个问题的主要原因是vuex的版本高于vue的版本。如果vue使用2.XX,vuex的版本要低于4.XX.
"dependencies": { "axios": "^1.6.7", "core-js": "^3.8.3", "element-ui": "^2.15.13", "font-awesome": "^4.7.0", "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" },
解决办法:

  1. 卸载旧版本。npm uninstall vuex;
  2. 安装适合的版本。npm install vuex@3.6.2 --save

1、卸载安装过的vuex 使用npm uninstall vuex 命令
2、重新安装指定版本的vuex 使用npm install vuex@3.6.2 --save 命令

总结:当你使用vue2开发的时候,建议使用的vuex版本号是3.XX版本;当你使用vuex3开发的时候,建议使用的vuex版本是4.XX

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。

posted @ 2024-04-03 20:42  瘦腿先生Stephen  阅读(379)  评论(0编辑  收藏  举报