两者的区别

(1)this.$store.commit()
  commit: 同步操作

this.$store.commit('方法名',值)【存储】

this.$store.state.方法名【取值】

(2)this.$store.dispatch()
  dispatch: 异步操作

this.$store.dispatch('方法名',值)【存储】

this.$store.getters.方法名【取值】

  当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了。其他使用commit即可。

  相关基础知识:
  commit=>mutations,用来触发同步操作的方法。
  dispatch =>actions,用来触发异步操作的方法。
  在store中注册了mutation和action,在组件中用dispatch调用action,然后action用commit调用mutation。

参考链接:Vue中this.$store.dispatch() 与 this.$store.commit()

Vue中this.$store.dispatch() 与 this.$store.commit()的区别的更多相关文章

  1. vuex中this.$store.dispatch和this.$store.commit的区别(都是调用vuex中的方法。一个异步一个同步)

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法:this.$store.commit( ...

  2. vue中assets文件夹与static文件夹的区别

    1.如果这些产品图片文件“万年不变”,放在 /static 目录里,(不需要使用require将这些图片作为模块来引用) var products = [{ img: '/static/img/pro ...

  3. Vue中computed(计算属性)、methods、watch的区别

    实现效果:字符串的动态拼接 methods方法 html: <div id="app"> <!-- 监听到文本框数据的改变 --> <input ty ...

  4. vue中 computed和watch的一些简单理解(区别)

    今天看到一个问题,就是vue的computed和watch要在哪些场景下使用,其实也就是在问他们的区别.computed也就是计算属性,它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中 ...

  5. vue中import xxx from 和 import {xxx} from的区别

    1.import xxx from import FunName from ‘../xxx’ 对应js中的引用: export defualt function FunName() { return ...

  6. Vue中computed、methods、watch的联系和区别

    computed是计算树形,methods是方法. new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversed ...

  7. Vue中 v-for 绑定key和不绑定key的区别

    首先,它们区别主要在于 虚拟DOM的复用,绑定key可以更好的复用,下面来详细讲一下 假如我们有一个数组 arr = [1,2,3,4],我们要在2后面插入一个值9: 如果绑定了key值,那么会是这样 ...

  8. 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域

    一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...

  9. 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)

    vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...

  10. Elasticsearch学习之图解Elasticsearch中的_source、_all、store和index属性

    转自 : https://blog.csdn.net/napoay/article/details/62233031 1. 概述 Elasticsearch中有几个关键属性容易混淆,很多人搞不清楚_s ...

随机推荐

  1. 游戏推荐业务中基于 sentinel 的动态限流实践

    作者:来自 vivo 互联网服务器团队- Gao Meng 本文介绍了一种基于 sentinel 进行二次开发的动态限流解决方案,包括什么是动态限流.为什么需要引入动态限流.以及动态限流的实现原理. ...

  2. Nuxt.js 应用中的 app:templates 事件钩子详解

    title: Nuxt.js 应用中的 app:templates 事件钩子详解 date: 2024/10/18 updated: 2024/10/18 author: cmdragon excer ...

  3. 2021年华为Java面试真题解析,帮你解决95%以上的问题!

    前言 由于作者面试过程中高度紧张,本文中只列出了自己还记得的部分题目. 经历了漫长一个月的等待,终于在前几天通过面试官获悉已被蚂蚁金服录取,这期间的焦虑.痛苦自不必说,知道被录取的那一刻,一整年的阴霾 ...

  4. BootStrap5应用时tooltips的添加

    BootStrap5应用时tooltips的添加 官方示例 <button type="button" class="btn btn-secondary" ...

  5. Nuxt.js 应用中的 imports:sources 事件钩子详解

    title: Nuxt.js 应用中的 imports:sources 事件钩子详解 date: 2024/10/27 updated: 2024/10/27 author: cmdragon exc ...

  6. WebDriver常用属性和方法

    除了上一篇的元素定位方法,Selenium中的WebDriver类中还有一些常用的属性和方法 一.常用的属性 1.下表列出了WebDriver的常用属性 # 属性 属性描述 用途 1 driver.n ...

  7. 一文讲透 FPGA CDC 多bit跨时钟域同步-hand-shanking机制

    一.背景 数据的跨时钟域处理是FPGA开发过程中的常见问题,存在两种情况 慢时钟向快时钟同步:只需在快时钟域打两拍即可.其RTL如下: 打拍同步的原理:大家在初学FPGA时,经常听过FPGA中对信号打 ...

  8. vue 子组件data属性为啥必须是一个函数

    其实就是一个原因,实例化出来的根组件只有一个,你可以将它写成对象,或者是返回一个对象的函数.但是子组件不够健壮,容易在内存的地址中互相影响,就像我们常用的深浅拷贝所能解决的那样.所以为了防止意外的发生 ...

  9. .NET Core 异步(Async)底层原理浅谈

    简介 多线程与异步是两个完全不同的概念,常常有人混淆. 异步 异步适用于"IO密集型"的场景,它可以避免因为线程等待IO形成的线程饥饿,从而造成程序吞吐量的降低. 其本质是:让线程 ...

  10. 试了下Cursor,感觉程序员工种危险了

    大家好,我是汤师爷~ 今年8月份,AI 编程工具 Cursor 在开发者社区彻底火了.在 Twitter 平台上,Cloudflare 副总裁分享了一段视频,展示了一个令人震惊的案例.他年仅 8 岁的 ...