Error in created hook: “TypeError: Cannot read property ‘commit‘ of undefined“

最新推荐文章于 2024-04-09 18:45:57 发布
最新推荐文章于 2024-04-09 18:45:57 发布
阅读量1.9k 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_57484291/article/details/118598889
本文介绍了一个常见的Vuex错误——在created钩子中无法读取store.commit属性的问题，并给出了具体的解决方案，即确保在main.js文件中正确引入了全局store。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用vuex的时候一直报这个错： Error in created hook: "TypeError: Cannot read property 'commit' of undefined"

检查了一遍发现原来没有在main.js引入全局store

import store from 'store/store.js'

const app = new Vue({ ...App, store })

前端大米
关注
Angular_01_入门_上篇_开发环境_CLI工具_Component
pre_eminent的JAVA学习园地
06-09 1069
QuickStartGood tools make application development quicker and easier to maintain than if you did everything by hand.The Angular CLI is a command line interface tool that can create a project, add file...
vuex载入vue时store首字母不可大写
ixx_0的博客
04-21 669
在一次使用vuex中突然报以下错误 TypeError: Cannot read property 'commit' of undefined at VueComponent.mappedMutation (vuex.esm.js?ed0c:906) at VueComponent.selectSinger (search-suggest.vue?adea:110) at ...
报错VM1548 WAService.js:2 TypeError: Cannot read property ‘commit‘ of undefined
eyes++的博客
08-18 4109
今日份血泪教训，找了三个小时的bug。 在js文件中引入vuex时使用了vuex的模块写法，如下图所示 此时可以成功获取mapMutations('xWeather', ['setNavUserAddress', 'setNavUserWeather'])对象的两个函数，但是调用时报错VM1548 WAService.js:2 TypeError: Cannot read property 'commit' of undefined，我点开报错资源页时发现，在调用vuex时会使用this获取commit函数
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘commit‘)
weixin_47078502的博客
03-27 460
index.vue:85 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'commit')
mpvue - vuex辅助函数报错：Cannot read property 'commit' undefined
idomyway的博客
10-31 1391
前言     在mpvue中，vuex对象不能注入到页面和组件当中     如果使用了vuex辅助函数mapMutations与mapGetters，则在子组件中会报如下的错误： 解决方法：     将store对象通过$store属性添加到vue原型上，即： Vue.prot...
使用Vuex时报错提示Cannot read property 'commit' of undefined
weixin_44530406的博客
04-26 2万+
使用Vuex时报错提示Cannot read property ‘commit’ of undefined 原因：main.js中未导入store。 解决方法：main.js中导入store。
使用Vuex时报错提示Cannot read property ‘commit‘ of undefined终极解决
coral_150的博客
03-08 3063
使用Vuex时报错提示Cannot read property 'commit' of undefined`，检查了很久终于发现是版本冲突的问题！
在页面渲染后，参数传递，却显示：TypeError: Cannot read property ‘xxx‘ of undefined 解决办法
qq_64595427的博客
04-09 655
今日在写代码时，需要传递变量，将值传递于报名页面：如下却显示：TypeError: Cannot read property 'actList' of undefined。
vue使用$store.commit() undefined报错
qq_45504834的博客
03-06 4376
这里我想把token和userInfo分别存入sessionStorage和LocalStorage中，登录提交的时候报commit undefined 问题所在，我们没有在全局中配置store，解决办法如下 在main.js中配置store即可 成功存储
vue中各种报错的解决方法
加菲猫的鳄鱼的博客
05-27 3791
1:[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'commit' of undefined" 在做vuex的时候出现了这个报错，原因是没有吧store导入到main.js中 在store文件中定义了一个index文件所以我们只需要引入store文件夹名就可以了 2:[Vue wa...
[解决]“TypeError: Cannot read property ‘xxx‘ of undefined“
m0_64838460的博客
11-18 1万+
错误解决。
解决 Error in created hook: “TypeError: Cannot read property ‘xxxxxx‘ of undefined“
sm923的博客
07-02 2万+
解决vue属性未定义问题
uniapp使用render报错函数[Vue warn]: Error in beforeCreate hook: “TypeError: Cannot read property ‘_i‘ of
lingliu0824的博客
04-07 4125
需求 期望通过数组对象，动态渲染出页面组件 方法 使用render方法通过$createElement根据对象的type字段确定创建组件并将其他参数传入组件 renderParent($h,parent) { const values = this.values const field = parent.options.field let value ; if(field){ value = values[field] } return $h(parent.type,{ props:{
Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘style‘)“
本郡主是喵
06-29 7643
钩子函数中的操作不依赖于组件的 DOM 元素。如果需要等待组件的 DOM 元素完全加载或渲染，请考虑使用。钩子函数中访问的数据属性或计算属性是否被正确定义和初始化。确保被引用的属性存在，并且已经被正确赋值。如果你能提供更多的代码或具体的错误上下文，我将能够给出更准确的建议来帮助你解决这个问题。钩子函数中发生，它表示在该钩子函数中尝试读取一个未定义的对象的。这个错误通常在 Vue 组件的。钩子函数来执行相关操作。
成功解决：Cannot read properties of undefined (reading ‘commit‘)
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
09-15 9663
Cannot read properties of undefined (reading 'commit')
Error in mounted hook: “TypeError: Cannot read property ‘XXXXX‘ of undefined“
bihaiyanyu的专栏
10-22 3万+
今天使用iview画页面时遇到一个很简单但是搞了很久的bug，加了一个控件 <user-select style="width:200px" @on-change="handleSelect" ref="user" v-model="form.userCode"> </user-select> 然后使用$refs调用组件属性 this.$refs.user.initData(); 然后神奇的地方出现了，不管怎么该，一直报Error in mounted hook:
vue 报错解决：TypeError: Cannot read property '_t' of undefined"
热门推荐
科技追踪者的专栏
03-13 15万+
前端报错如下： [Vue warn]: Error in render: “TypeError: Cannot read property ‘_t’ of undefined” 是在项目中用了多语言配置，vue 跟 i18n之间的兼容问题。解决方法如下： Vue.use(iView) 替换成 Vue.use(iView, { i18n: function(path, op...
uniapp Error in onLaunch hook: "TypeError: Cannot read property 'commit' of undefined"
最新发布
03-08
### 解析 UniApp `onLaunch` 钩子函数中的 `TypeError` 当在 UniApp 应用程序中遇到 `TypeError: Cannot read property 'commit' of undefined` 错误时，这通常意味着尝试访问未定义对象上的属性或方法。具体来说，在 Vuex Store 上调用 `commit` 方法失败表明当前上下文中缺少对 Vuex Store 实例的正确引用。 #### 可能的原因 1. **Store 引入错误** 如果没有正确引入 Vuex Store 或者引入路径不正确，则会导致无法获取到 Store 对象实例[^1]。 2. **this 指向问题** 在某些情况下，特别是在异步操作或其他作用域内执行回调函数时，可能会导致 `this` 关键字指向意外的对象而不是预期的应用实例[^3]。 3. **钩子函数内的初始化顺序不当** 当应用程序启动时立即触发的操作可能发生在 Vuex Store 完全加载之前，从而引发此类异常情况[^4]。 #### 解决方案 为了修复此问题并确保能够在应用生命周期早期阶段安全地与 Vuex 进行交互，可以采取以下措施： - **确认 Store 正确挂载** 确认项目根目录下的 main.js 文件已经成功注册了 Vuex 插件，并且 App.vue 组件能够通过 `$store` 访问到全局状态管理器。 ```javascript import Vue from 'vue' import App from './App' import store from '@/store/index' new Vue({ el: '#app', store, render: h => h(App), }) ``` - **调整 Hook 函数逻辑** 修改 `onLaunch()` 方法内部代码结构以避免潜在的作用域冲突；使用箭头函数来保持正确的 this 指针指向。 ```javascript export default { onLaunch() { const that = this; setTimeout(() => { console.log(that.$store); // 延迟一段时间后再发起请求 uni.request({ url: '/api/data', // 替换成实际接口地址 success(res) { if (res.statusCode === 200 && res.data.success) { that.$store.commit('setData', res.data.result); } }, fail(err) { console.error('Failed to fetch data:', err); } }); }, 500); // 设置适当延迟时间等待Vuex初始化完成 } }; ``` - **优化 Action 调用方式** 将原本直接写死的动作改为更灵活的形式，比如利用 Promise 来处理异步流程控制，这样不仅可以提高可读性和维护性，还能更好地应对复杂的业务需求。 ```javascript actions: { async fetchData({ commit }) { try { const response = await axios.get('/api/data'); if (response.status === 200) { commit('updateData', response.data); } } catch (error) { console.error(error.message); } } } ``` 上述建议旨在帮助开发者排查和解决问题的根本原因，同时提供了一些最佳实践指导，以便于构建更加健壮可靠的单页应用程序(SPA)。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值