已解决 TypeError: this.$store.commit is not a function (Vue)

于 2023-09-17 23:48:45 发布
阅读量824 收藏 1
点赞数
分类专栏： 已解决Bug专栏 Vue 文章标签： vue.js 前端 javascript
公众号： 猫头虎技术团队
本文链接：https://blog.csdn.net/libin9iOak/article/details/132958875
版权

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁

在这里插入图片描述

🦄 博客首页:

🪁🍁 希望本文能够给您带来一定的帮助🌸文章粗浅，敬请批评指正！🐅🐾🍁🐥

文章目录

已解决 TypeError: this.$store.commit is not a function (Vue)

摘要

嗨，大家好，我是猫头虎博主！今天我要和大家分享一些关于Vue前端开发中遇到的一个令人头疼的Bug：TypeError: this.$store.commit is not a function。在这篇博客中，我将详细解释这个Bug的原因，提供解决方法，并分享如何避免它。让我们一起深入探讨吧！😺

引言

在Vue.js应用程序开发中，我们经常使用Vuex来管理状态。然而，有时候会遇到一个奇怪的错误，即TypeError: this. s t o r e . c o m m i t i s n o t a f u n c t i o n 。这个错误通常出现在尝试使用 ‘ t h i s . store.commit is not a function。这个错误通常出现在尝试使用`this. store.commitisnotafunction。这个错误通常出现在尝试使用‘this.store.commit`来提交一个Vuex mutation时。让我们一起看看这个问题的根本原因。

Bug的原因

这个Bug的根本原因是在某些情况下，this.$store的值不是我们所期望的。通常情况下，this.$store应该是一个Vuex store实例，但在出现这个Bug时，它却不是一个函数。这可能是由于以下几种情况导致的：

1. Vuex Store未正确配置

首先，我们需要确保我们的Vuex Store已经正确配置。检查一下你的store文件，确保你已经正确导入并使用了Vuex库，并且已经创建了一个store实例。

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  store, // 注入store
  // ...
})

2. 组件访问错误

另一个可能的原因是在组件中访问this.$store时出现了问题。确保你在Vue组件中正确访问this.$store，而不是在组件之外。

// 错误示例
const myComponent = new Vue({
  // ...
  methods: {
    doSomethingWrong() {
      this.$store.commit('someMutation') // 错误的访问方式
    }
  }
})

3. Vue版本不兼容

有时，Vue的版本与Vuex或其他相关库的版本不兼容，可能会导致this.$store出现问题。确保你的Vue及其相关库都是最新版本。

解决方法

解决TypeError: this.$store.commit is not a function错误的方法有多种，取决于问题的根本原因。下面是一些可能的解决方法：

1. 确保正确配置Vuex

首先，确保你的Vuex Store已经正确配置，包括正确导入Vuex库并创建了一个store实例。

2. 正确访问this.$store

在Vue组件中，确保你使用正确的方式访问this.$store，通常是在methods中使用。

3. 检查Vue版本兼容性

确保Vue及其相关库的版本兼容。升级到最新版本可能会解决一些Bug。

避免这个Bug

为了避免遇到这个Bug，可以采取一些预防措施：

1. 组件模块化

将你的代码拆分成小组件，使其更加模块化。这有助于减少出现这种Bug的可能性。

2. 版本控制

使用版本控制工具（如Git）来管理你的代码，以便在出现Bug时能够轻松回滚到之前的稳定版本。

3. 定期更新依赖项

确保你的项目依赖项（Vue、Vuex等）保持最新版本，以获得最新的Bug修复和功能改进。

总结

在Vue.js前端开发中，出现TypeError: this. s t o r e . c o m m i t i s n o t a f u n c t i o n 错误可能会令人烦恼。然而，通过正确配置 V u e x ，正确访问 ‘ t h i s . store.commit is not a function错误可能会令人烦恼。然而，通过正确配置Vuex，正确访问`this. store.commitisnotafunction错误可能会令人烦恼。然而，通过正确配置Vuex，正确访问‘this.store`，以及保持依赖项的最新版本，我们可以有效地解决这个Bug，并且在开发过程中避免它的发生。

希望这篇博客对你有所帮助！如果你有任何问题或建议，欢迎留言交流。一起进步，一起解决Bug！😸

参考资料

在这里插入图片描述

🐅🐾 猫头虎建议程序员必备技术栈一览表📖：

🌐 前端技术 Frontend:

  1. 基础技术:

    • 📜 HTML5
    • 🎨 CSS3 (以及预处理器如Sass、Less)
    • 📚 JavaScript (ES6+)

  2. 前端框架和库:

    • ⚛️ React
    • 🅰️ Angular
    • 🖼️ Vue.js
    • 💠 Svelte

  3. 状态管理:

    • 🌐 Redux (通常与React一起使用)
    • 🌀 MobX
    • 🅰️ NgRx (用于Angular)
    • 🖼️ Vuex (用于Vue)

  4. 工具和构建系统:

    • 🛠️ Webpack
    • 🌀 Rollup
    • 📦 Parcel
    • ⚙️ Babel (用于JavaScript转译)

  5. 包管理器:

    • 📦 npm
    • 🧶 Yarn

  6. 路由管理:

    • 🌐 React-Router (用于React)
    • 🅰️ Angular Router
    • 🖼️ Vue Router

  7. API和通讯:

    • 📡 Fetch API
    • 📜 Axios
    • 📡 GraphQL (以及相关客户端如Apollo和Relay)

  8. 样式和组件库:

    • 💅 Styled Components
    • 🎨 Ant Design
    • 💙 Bootstrap
    • 🖼️ Material-UI

  9. 测试工具:

    • 🧪 Jest
    • 🔄 Mocha
    • 🐜 Cypress (用于端到端测试)
    • 📚 Enzyme, Testing Library

  10. 版本控制:

  • 📚 Git (以及GitHub, GitLab, Bitbucket)
  1. 代码格式化和质量检查:
  • 🛠️ ESLint
  • 🎨 Prettier
  1. 性能优化与监控:
  • ⚡ Lighthouse
  • 🔥 Web Vitals
  • 📈 Google Analytics
  1. 跨平台移动开发:
  • 🚀 React Native
  • 🖼️ Vue Native

原创声明

======= ·

  • 原创作者： 猫头虎
  • 编辑 ： Libin9iOak

作者wx： [ libin9iOak ]
公众号：猫头虎技术团队

学习复习
✔✔

本文为原创文章，版权归作者所有。未经许可，禁止转载、复制或引用。

作者保证信息真实可靠，但不对准确性和完整性承担责任。

未经许可，禁止商业用途。

如有疑问或建议，请联系作者。

感谢您的支持与尊重。

点击下方名片，加入IT技术核心学习团队。一起探索科技的未来，共同成长。

猫头虎-前端技术
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
猫头虎分享已解决Bug || TypeError: this.$store.commit is not a function in Vue
最新发布
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
02-08 1080
在这篇博客中，我将详细解释这个Bug的原因，并提供一系列解决步骤。准备好跟随我一起深入Vue的世界，解决这个棘手的问题了吗？让我们开始吧！🐾💻问题类型原因解决方案预防措施TypeErrorVuex未正确初始化检查Vuex安装和初始化代码代码审查，确保初始化代码正确TypeError作用域问题使用正确的作用域确保this指向Vue实例在回调中使用箭头函数或其他方法绑定thisTypeError方法名或调用方式错误核对mutation名称和调用方式代码审查和单元测试。
vuex 解决报错this.$store.commit is not a function的方法
10-17
主要介绍了vuex 解决报错this.$store.commit is not a function的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
11-20
1、在Vue项目中引用公共方法 作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不多说直接看代码把 首先 要在main.js中引入公共js。然后，将方法赋在Vue的原型链上。 像图中这样。 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export default{ login:function(){ console.log('这是一段代码') } }
详解vuex数据传输的两种方式及this.$store undefined的解决办法
12-09
这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写. 问题版本的如下所示: import Store from './store' 我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响. 这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个”全局变量”, 但vuex也可以仅提供给部分组件,即谁想用,在谁的script中import这个vuex对象. 第一种方式 – 将vue
vuex中this.$store.commit和this.$store.dispatch的用法
热门推荐
老电影故事的博客
12-10 3万+
前言 this.store.dispatch()与this.store.dispatch() 与 this.store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state 区别 this.$store.commit() 同步操作 this.$store.commit('方法名',值)【存储】 this.$store.state.方法名【取值】 this.$store.dispatch()
Vue学习笔记（七）
qq_27144571的博客
02-19 3351
Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个
vuex中 this.$store.dispatch() 与 this.$store.commit()二者的区别
天涯芳草
04-26 2万+
this.$store.dispatch()与this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值) ......
vuex中的this.$store.commit...
weixin_45677987的博客
08-02 1万+
1：vuex 中的$store.commit 的用法: 使用window.sessionStorage.setItem 方法 保存到本地。 window.sessionStorage.setItem('companyCode', res.data.data.companyAccount); 然后使用window.sessionStorage.getItem('xxxx'); 获取到这个值。 2: this.companyAccount = window.sessionStorage.ge.
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2094
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
详解Vue This$Store总结
10-17
主要介绍了详解Vue This$Store总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
控制台报错：this.$t is not a function
m0_59157023的博客
05-01 1340
this.$t is not a function
Uncaught TypeError: XXX is not a function问题解决方法
qq_70095877的博客
03-25 7725
Uncaught TypeError: XXX is not a function前端控制台报错
vue 项目在浏览器控制端报错：Error in v-on handler: “TypeError: xxx is not a function“ 问题分析及解决方式
YHLSunshine的博客
06-05 8564
vue 项目在浏览器控制端报错：Error in v-on handler: “TypeError: xxx is not a function“ 问题分析及解决方式
vue中的全局变量 this.$store.state 的取值与赋值
coldriversnow的专栏
06-16 2万+
一、定义 全局变量 注：如果不在store目录下的 index.js 定义 则 在其它 ***.vue 页面 代码中赋值，其它页面的这个全局变量，是不会变化的。
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
OneBaBa的专栏
06-05 2087
在组件中使用actions，在组件中使用actions和在组建中使用mutations类似区别就是，mutations使用this.$store.commit('mutation方法名')提交mutation；dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)commit：同步操作，写法：this.$store.commit('mutations方法名',值)
Vuex中模块化后this.$store.commit和this.$store.state的用法
bob的博客
07-10 1万+
1.背景 大中型项目，需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。 再使用单个store方式会让项目代码冗余，不利于组件复用，模块化后对于一些相同的方法名this.$store.commit 怎样调用到相应的模块下，今天来实践一下。 2.将store模块化 2.1在src目录下创建store文件夹,再创建一个index.js作为所有模块的向外暴露的出口 2.2这个是tab2.js,具体的业务逻辑可以写在这里，最总要的是namespaced，模块化一定要命名空间，否则同样的
vuex中的this.$store.commit和dispatch()使用
coinisi_li的博客
09-09 5829
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值