1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action

2. 通俗来讲,vuex是设计出来核心业务是通信。

其中state为全局的数据源,支持多组件双向绑定。

想要在任何地方更改state都需要通过commit store的mutation。

但是mutation只支持同步操作。

想要完成异步操作,比如与后端通信然后将数据赋值给state,就需要通过action的异步回调中再去commit store的mutation。

也就是说 想用异步必须用action,想用action又必须去用mutation,他们本身就是 一个数据变化的流程。

组件内部通过this.$store.dispatch('XXXX')去调用action,也可以用语法糖actionMap进行多action的映射绑定。

vuex mutation,action理解的更多相关文章

  1. 个人对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

  2. [转] 对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

  3. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  4. Vuex基础-Action

    在文章开始之前,再次强调一句:Vuex会把getter mutations action不管是在模块定义的还是在根级别定义的 都会注册在全局 官网API地址:https://vuex.vuejs.or ...

  5. vuex的简单理解

    初次接触vuex,谈谈我自己的理解.有待后期改进 首先要知道,Vuex 是专门为 Vue.js 设计的状态管理库.我们知道在用vue.js进行前端项目开发时,会出现很多组件相互之间调用属性.状态,小项 ...

  6. zabbix action理解

    Maintenance status not in maintenance   谷歌翻译:维护状态不在维护中,中文意思就是监控的设备有problem,触发器报警了,然后执行action {TRIGGE ...

  7. 对vuex的一点理解

    vuex是vue.js的一个状态管理工具,它适用于解决平行组件之间的数据共享问题.一般情况下,我们更多的是父子组件之间通过props或$emit来实现传值,如何不满足以上情况那只有使用vuex进行解决 ...

  8. mutation与vuex区别

    vuex- action   1.当点发送过快,页面中渲染的内容与state中的数据不一致,vuex里面的state变得慢,且不持续更新 2.action中是可以做到页面中state中数据保持一致 责 ...

  9. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

随机推荐

  1. Bootstrap3的响应式缩略图幻灯轮播效果设计

    在线演示1 本地下载 HTML <div class="container">  <div class="col-md-12">  &l ...

  2. 14-Ubuntu-文件和目录命令-查看目录内容-ls-1

    1.终端使用技巧 (1)tab键自动补全 (2)按上/下光标键查看使用过的命令 (3)退出当前命令,Ctrl C (4)缩小--Ctrl - ;放大--Ctrl shift + 2.ls 命令--查看 ...

  3. Spring 基于xml配置方式的事务(14)

    参考前面的声明式事务的例子:http://www.cnblogs.com/caoyc/p/5632198.html 我们做了相应的修改.在dao中和service中的各个类中,去掉所有注解标签.然后为 ...

  4. 初探.Net Core API 网关Ocelot(一)

    一.介绍 Ocelot 是基于.NetCore实现的开源的API网关,支持IdentityServer认证.Ocelot具有路由.请求聚合.服务发现.认证.鉴权.限流熔断等功能,并内置了负载均衡器与S ...

  5. Centos6.5离线安装gcc

    木有网的centos折腾起来简直费劲的不要不要的~ 学校的虚拟机最开始只安装了一个libgcc-4.4.7-4,然而这是不够用的,比如安装软件的时候,需要输入"./configure&quo ...

  6. 2019-8-31-C#-如何写出一个不能被其他程序集继承的抽象类

    title author date CreateTime categories C# 如何写出一个不能被其他程序集继承的抽象类 lindexi 2019-08-31 16:55:58 +0800 20 ...

  7. Linux-iptables-route-rule

    详情: http://www.mamicode.com/info-detail-1412618.html  最后面有粘贴 linux系统路由表 linux一共0-255个路由表 linux可以自定义从 ...

  8. The linux command 之权限

    一.修改权限 只有文件主或者超级用户才可以修改文件或者目录的权限. 符号表示法分为三种: Who the change will affect Which operation will be perf ...

  9. JS鼠标经过

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟 ...

  10. Erlang学习记录:运算符

    数学运算符 说明 详细 符号 加减乘 +-* 浮点数除 结果为浮点数 / 整数除 除数和被除数都必须是整数,结果为整数 div 整数取余 rem 逻辑运算符 说明 符号 详细 and 前后两个值都为真 ...