两者的区别

(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. HarmonyOS NEXT开发之ArkTS自定义组件学习笔记

    在HarmonyOS中,ArkTS提供了创建自定义组件的能力,允许开发者封装和复用UI代码.以下是关于自定义组件的详细介绍,包括创建自定义组件.页面和自定义组件的生命周期.自定义组件的自定义布局.冻结 ...

  2. 云原生爱好者周刊:使用 GitOps 来动态管理 Grafana 的数据源

    文章推荐 使用 GitOps 来动态管理 Grafana 的数据源 通过 Grafana 的 Provisioning 特性,可以在 provisioning/datasources 目录下添加多个 ...

  3. 常见APR攻击及其防护

    0x01 什么是ARP 地址解析协议--ARP:是根据IP地址获取物理地址的一个TCP/IP协议.主机发送信息时将包含目标IP地址的ARP请求广播到局域网络上的所有主机,并接收返回消息,以此确定目标的 ...

  4. css常用布局之flex布局

    Flexbox 是一个一维的布局模式,它可以轻松地在不同的方向上排列子元素(称为 flex 项),即使它们的大小是未知或者是动态变化的.以下是 Flexbox 的一些关键概念: 容器和项: 启用 Fl ...

  5. 【斩虫】Hadoop中作业执行刚开始就挂掉的两种情况

    开门见山. 最近在搭建基于 Hadoop 3.3.6 的高可用集群时,遇到了虽然守护进程能正常启动,但是提交 WordCount 示例程序后作业没有办法启动执行的情况(刚开始就挂了),查看日志发现主要 ...

  6. [解决方案] 几种通过 iproute2 来打通不同节点间容器网络的方式

    几种通过 iproute2 来打通不同节点间容器网络的方式 几种通过 iproute2 来打通不同节点间容器网络的方式 host-gw ipip vxlan 背景 之前由于需要打通不同节点间的容器网络 ...

  7. 新手入门Java自动化测试的利器:Selenium WebDriver

    今天我们将深入探讨一款强大的Java自动化测试工具--Selenium WebDriver.在正式介绍Selenium WebDriver之前,让我们首先对Selenium本身进行简要概述,以便更好地 ...

  8. 使用Boost.asio与Boost.beast基于协程连接ws

    目录 目录 前言 准备工作 实现 初始化io_context并监听信号 启动连接ws的线程并启动io_context 建立tcp链接(以下步骤皆位于ws函数中) ws握手 传输数据 效果 总结 前言 ...

  9. 开源 - Ideal库 - 特殊时间扩展方法(三)

    书接上回,我们继续来分享一些关于特殊时间获取的常用扩展方法. 01.获取当天的开始时间 当天的开始时间指00:00:00时刻,因此只需要获取DateTime的Date属性只获取时间即可,具体代码如下: ...

  10. k8s之常见问题汇总

    1.服务器中的k8s已经被移除,但是磁盘依然有占用, 于是将其卸载并删除操作 [root@k8s-node2 k8s_node]# rm -rf /var/lib/kubelet rm: cannot ...