两者的区别

(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. ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南

    作者:运维有术 前言 知识点 定级:入门级 KubeKey 安装部署 ARM 版 KubeSphere 和 Kubernetes ARM 版 KubeSphere 和 Kubernetes 常见问题 ...

  2. 不用PLC和板卡,一台电脑就可以控制伺服

    1.前言 大家好!我是付工. EtherCAT是运动控制领域使用最广泛的总线通信协议之一. 如果我们只有一台电脑,能不能直接控制EtherCAT总线伺服呢? 这个是完全可以的. 我们可以在电脑上安装实 ...

  3. 初学Linux的可以看看

    Linux常用命令总结 自己简单总结的,希望对大家有帮助吧! 关机/重启 系统信息 文件以及目录 vim文件编辑器 打包压缩 用户和组 权限所有者 RPM YUM mount find 自己简单总结的 ...

  4. 云游戏平台陷入苦战,继青椒云,云更新,顺网云后,ToDesk正在布局云电竞市场

    在日新月异的科技浪潮中,云游戏正在逐步成为游戏产业的重要分支.根据中国信通院<2023年全球云游戏产业深度观察及趋势研判研究报告>,2022年中国云游戏市场收入达到63.5亿元,同比增长5 ...

  5. 字符串和json相互转换

    字符串转成json格式 JSON.parse(string) json格式转成字符串 JSON.stringify(obj) 在vue中还可以使用qs插件使用this.$qs.stringify(ob ...

  6. Nuxt.js 应用中的 imports:context 事件钩子详解

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

  7. Centos7系统docker部署Ferry工单系统

    1.更新yum源国内阿里1.1备份当前yum仓库配置sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.rep ...

  8. 2024御网线上Pwn方向题解

    ASM Checksec检查保护 基本上保护都关闭了 64位ida逆向 程序只有一段,并且返回地址就是输入的数据,看起来就是srop了,找一下可以用的gadget 通过异或清空rax值,然后通过异或e ...

  9. Linux 日志管理基础

    目录 基本介绍 日志的存放 存放目录与存放内容 举例说明 日志管理服务: rsyslogd 功能与配置 检查自启动 配置文件 /etc/rsyslog.conf 修改配置文件 基本介绍 日志文件是重要 ...

  10. 题解:CF685A Robbers' watch

    题解:CF685A Robbers' watch 感觉这题难点主要在理解题意. 题意 一天 \(n\) 个小时,一小时 \(m\) 分钟,手表用 \(7\) 进制表示时间(位数未填满补前导零),求问这 ...