Vuex 中 使用 Action 处理异步请求时,常规写法如下:

   getMenuAction:(context) =>{
context.commit('SET_MENU_LIST',['承保2','核保2'])
}
}

  我们也可以使用如下简化写法,如下:

   actions:{
getMenuAction:({commit}) =>{
commit('SET_MENU_LIST',['承保2','核保2'])
}
}

  这是一种怎么的写法呢?

  其实这是 ES6 中一种被称为  变量解构赋值  新的语法知识,可参考我的另外一篇文章  变量解构赋值。

     我们可以看看  Vuex 中 注册 Action的源码如下:

  

  

  常规写法中的 context = {   dispatch: local.dispatch,
                     commit: local.commit,
                getters: local.getters,
                state: local.state,
                rootGetters: store.getters,
                rootState: store.state                         }

  使用 变量解构赋值后 { commit } 的 commit= context.commit 了。

  

Vuex- Action的 { commit }的更多相关文章

  1. vuex action 与mutations 的区别

    面试没说清楚.这个太丢人回来整理下: 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步 ...

  2. 如何在 vuex action 中获取到 vue 实例

    问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$m ...

  3. VUEX action解除页面耦合

    最近项目中需要用到vue+vuex来实现登出跳转功能,老大指派任务要用action解除页面耦合,刚从vue深渊晕晕乎乎爬出来的我是一脸懵逼啊...啥是解除耦合...网上vuex的资料太少了,vuex手 ...

  4. vuex——action,mutation,getters的调用

    一.子模块调用根模块的方法 mutation调用  context.commit('clearloginInfo',{key_root:data},{root:true}); action调用  co ...

  5. vue-x action 的相互调用

    实现方式:分发 Action Action 通过 store.dispatch 方法触发: store.dispatch('increment')

  6. vuex mutation,action理解

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

  7. Vuex 模块化与项目实例 (2.0)

    Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就 ...

  8. Vue全家桶(Vue-cli、Vue-route、vuex)

    摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置.内部指令.全局API.选项.内置组件) 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这 ...

  9. vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  10. vuex 的基本使用之Module

    Module 首先介绍下基本的组件化规则:你可以根据项目组件的划分来拆分 store,每个模块里管理着当前组件的状态以及行为,最后将这些模块在根 store 进行组合. const moduleA = ...

随机推荐

  1. mongo安装,及远程连接

    yum 安装mongo创建镜像 1 vi /etc/yum.repos.d/mongodb-org-3.6.repo添加一下路径 保存退出[mongodb-org-3.6]name=MongoDB R ...

  2. TL-WR703Nv1.7刷写openwrt固件

    TP-LINK TL-WR703N是一个小型的路由器,可以有线转WiFi,3G转WiFi,很多人拿它刷openwrt系统,然后可以在上面各种搞事. V1.7以前 通常刷openwrt的做法是, 下载一 ...

  3. google软件测试之道读后感(二)

    这几天又翻了几页这本书,觉得妙语连珠,关键语录摘抄如下,并补充自己的一些思考: "如果你想要求一个团队去尝试新的事物或者做某些改进,给他们提供一个联系人会更好一些,这个联系人来源于更大的社区 ...

  4. Golang学习--包管理工具glide

    上一篇文章中我们已经成功的运行了go的代码,这是我们迈出的最基础的一步. 一个项目通常会依赖很多外部的库,当依赖的库比较多的时候,手工管理就会比较麻烦,这个时候就需要包管理工具出场了,帮你管理好所有依 ...

  5. 自动类型安全的.NET标准REST库refit

    在SCOTT HANSELMAN 博客上看到一个好东西<Exploring refit, an automatic type-safe REST library for .NET Standar ...

  6. iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 中间件用法

    中间件用法--讲解 Koa2 中间件的用法及如何开发中间件

  7. Dynamic HTML权威指南(读书笔记)— 第一章 HTML与XHTML参考

    1. 对齐常量(text-align和vertical-align) 1.1 盒外对齐 这种对齐属性决定环绕着元素外部矩形空间的文本对齐方式.W3C中,这类HTML元素包括:applet.iframe ...

  8. 高版本号chrome安装flashplayer debuger后无法使用的问题

    起因应该是苹果公司指出flash player的安全问题,还有各种原因导致google将在未来取消NPAPI的支持,所以fp们就悲剧了在高版本号chrome(42以上)默认是关闭外部安装的插件使用的, ...

  9. 【蓝牙低功耗BLE】控制GPIO来点亮LED

    这节讲一下最简单的,也是最基础的东西.CC2540的IO操作,把PORT口当做GPIO来用,废话不多说,往下看. 1.硬件电路 硬件电路时最简单的,用一根GPIO去控制LED灯.因为GPIO作为out ...

  10. Ubuntu 编译安装 OpenCV 3.1

    目标系统:Ubuntu 16.04-64bit OpenCV 版本:opencv-3.1.0 安装步骤 安装 cmake.sudo apt-get isntall cmake cmake-qt-gui ...