this.$store.dispatch() 和 this.$store.commit() 对比

已于 2022-06-19 11:38:44 修改
阅读量153 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
于 2021-05-25 16:51:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45055165/article/details/117259671
版权 
this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)

commit: 同步操作
存储 this.$store.commit('changeValue',name)
取值 this.$store.state.changeValue

dispatch: 异步操作
存储 this.$store.dispatch('getlists',name)
取值 this.$store.getters.getlists
————————————————
再好能是***嘛！
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2112
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
浅谈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.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 3418
Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
OneBaBa的专栏
06-05 2564
在组件中使用actions，在组件中使用actions和在组建中使用mutations类似区别就是，mutations使用this.$store.commit('mutation方法名')提交mutation；dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)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.
vuex中store存储store.commit和store.dispatch的用法
10-15
`store.commit` 和 `store.dispatch` 是 Vuex 中用于管理和改变状态的核心方法，它们各自有不同的功能和应用场景。 **1. store.commit** `store.commit` 用于触发一个 **mutation**（状态变更事件）。Mutation 是 ...
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
10-15
// 这里你可以使用store.state, store.commit, store.dispatch等 }) ``` 这样，我们就可以直接在路由守卫中访问Vuex store，而无需依赖`this`。 3. **使用箭头函数**： 另一种解决方法是使用箭头函数来定义...
对vuex中store和$store的区别说明
10-15
这是因为Vuex将store实例注入到了Vue的原型链上，因此在组件内部，我们可以通过`this`关键字来访问`$store`，进而使用`$store.state`来获取状态，或者使用`$store.getters`、`$store.actions`和`$store.mutations`...
vue.js的状态管理vuex中store的使用详解
10-16
在组件中，使用`store.commit('setUserList', userList)`来触发Mutation。 4. Action Action与Mutation类似，但它们可以包含异步操作。Action通过`store.dispatch`触发，可以用来调用API、发起HTTP请求等。例如，`...
vuex中的this.$store.commit和dispatch()使用
coinisi_li的博客
09-09 6482
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex
vue2组件通信-使用dispatch和broadcast
zhangx
10-23 1512
vue2组件通信-使用dispatch和broadcast 最近在使用Element过程中发现组件通信大量使用dispatch和broadcast两个方法，之前在vue2 组件通信也提到过 vue2 中取消了$dispatch和$broadcast两个重要的事件，而 Element 重新实现了这两个函数。 代码地址放在element-ui/lib/mixins/emi...
vue2-----vuex里面的this.$store.dispatch 和 this.$store.commit用法以及区别
最新发布
weixin_45458830的博客
11-27 1059
注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。commit： 同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里。dispatch：异步操作，数据提交至 actions ，可用于向后台提交数据。两个方法都是传值给vuex的mutation改变state。
已解决 TypeError: this.$store.commit is not a function (Vue)
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
09-17 1008
嗨，大家好，我是猫头虎博主！今天我要和大家分享一些关于Vue前端开发中遇到的一个令人头疼的Bug：TypeError: this.$store.commit is not a function。在这篇博客中，我将详细解释这个Bug的原因，提供解决方法，并分享如何避免它。让我们一起深入探讨吧！😺在Vue.js前端开发中，出现TypeError: this.storecommitisnotafunction错误可能会令人烦恼。然而，通过正确配置Vuex。
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，模块化一定要命名空间，否则同样的
vue 中的 this.$store.commit
欢迎所有人，批评指正！
10-12 5791
一直不明白 this.$store.commit 这个方法干了啥！ 比如这行代码 this.$store.commit('login', data); 可以看看下面（在vuex中也就是store 文件夹下面的 index.js 中）： new Vuex.Store({ mutations:{ login(state, user){ state.user = user; ...
Vuex中this.$store.commit() 和 this.$store.dispatch() 方法的区别
a654540233的博客
11-09 2745
两个方法其实很相似,关键在于一个是同步,一个是异步 commit: 同步操作 this.$store.commit('方法名',值) //存储 this.$store.state.'方法名' //取值 dispatch: 异步操作 this.$store.dispatch('方法名',值) //存储 this.$store.getters.'方法名' //取值 当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了,其他使用commit即可. 其他了解： co
this.$store.dispatch用法
09-06
this.$store.dispatch是VueX中用于触发action的方法。在Vue组件中，可以通过this.$store.dispatch来派发一个action，从而执行某个具体的操作。 使用方法如下： 1. 在Vue组件中，通过this.$store.dispatch('action...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值