vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

已于 2022-02-27 10:10:59 修改
阅读量190 收藏
点赞数 1
分类专栏： vue2 文章标签： vue.js
于 2022-02-27 10:10:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44173499/article/details/123154233
版权

vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

存取方式不同：

  • this.$store.commit()：同步操作

存储：this.$store.commit(‘mutations方法名’，值)

取值：this.$store.state.方法名

  • this.$store.dispatch()：异步操作

存储：this.$store.dispatch(‘action方法名’，值)

取值：this.$store.getters.方法名

相同点：

都是传值给vuex的mutation改变state数据

一个前端女子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2112
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
10-15
然而，在使用过程中，有时我们可能会遇到`this`关键字的指向问题，尤其是在尝试访问`this.$store`（Vuex store）或`this.$vux`（Vux组件库的方法）时。本文将详细介绍如何在全局路由守卫中替代`this`操作，以解决这...
浅谈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...
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 中的 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和dispatch()使用
coinisi_li的博客
09-09 6482
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex
vuex中store存储store.commit和store.dispatch的用法
10-15
`store.commit` 和 `store.dispatch` 是 Vuex 中用于管理和改变状态的核心方法，它们各自有不同的功能和应用场景。 **1. store.commit** `store.commit` 用于触发一个 **mutation**（状态变更事件）。Mutation 是 ...
对vuex中store和$store的区别说明
10-15
这是因为Vuex将store实例注入到了Vue的原型链上，因此在组件内部，我们可以通过`this`关键字来访问`$store`，进而使用`$store.state`来获取状态，或者使用`$store.getters`、`$store.actions`和`$store.mutations`...
vue.js的状态管理vuex中store的使用详解
10-16
创建一个Vue.js项目，安装Vuex (`npm install vuex --save`)，然后在项目中创建一个`store`文件夹，包含`store.js`。在`store.js`中导入Vue和Vuex，以及可能需要的axios。初始化Store如下： ```javascript import ...
vuex 解决报错this.$store.commit is not a function的方法
12-08
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得不是很好理解，有的时候我们只是需要动态的从一个组件中获取数据（官网称为“组件层级”：是个独立的控件，作用范围只在组件之内）然后想放到一个被官网称作“应用层级”（在项目的任意地方都可以随时获取和动态的修改，在修改之后，v
this.$store.dispatch() 与 this.$store.commit()
weixin_43755104的博客
08-04 161
传值给vuex的mutation改变state commit: 同步操作 存储 this.$store.commit('changeValue',name) 取值 this.$store.state.changeValue dispatch: 异步操作 存储 this.$store.dispatch('getlists',name) 取值 this.$store.getters.getlists
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()
已解决 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，模块化一定要命名空间，否则同样的
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。
this.$store.dispatch() 和 this.$store.commit() 对比
qq_45055165的博客
05-25 153
this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值) commit: 同步操作
uniapp中this.$store.dispatch
最新发布
06-14
在UniApp框架中，`this.$store.dispatch` 是用于向Vuex store（状态管理库）发送一个动作（action）的方法。Vuex是基于状态管理模式，它帮助你在单个应用程序中维护共享状态。当你调用 `this.$store.dispatch(actionName, [payload])` 时，你实际上是在告诉Vuex执行某个预定义的动作，通常这个动作会在store中的某个模块中的action文件中定义。 举个例子，假设你有一个`users`模块，其中有一个`login`的动作，你可以这样使用： ```javascript // 在组件内部 this.$store.dispatch('users/login', { username: 'JohnDoe', password: 'secret' }); // store/users/actions.js export const actions = { login({ commit }, { username, password }) { // 执行登录逻辑 // ... commit('USER_LOGIN_SUCCESS', { user }); } }; // store/users/mutations.js export const mutations = { USER_LOGIN_SUCCESS(state, { user }) { state.user = user; } }; ``` 这里，`dispatch` 方法会触发`login`动作，传递的数据会被传递给action的回调函数，然后执行相应的逻辑，并最终通过`commit`方法更新store的状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值