vuex中mutations与actions的区别
要执行vuex中的函数,有两种方法:
1.commit,例如this.$store.commit("GETMODULESELECTLIST"); //mutations中的方法
2.dispatch,例如 this.$store.dispatch("getModuleSelectList"); //actions中的方法
两者之间的区别在于:
commit是提交执行mutations中的方法,Mutations 是修改数据的,必须同步。
dispatch是提交执行actions中的方法,action 提交的是Mutations,可以是异步操作。action不可以修改store中的数据,需要commit mutation中的方法进行数据修改

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

vuex中mutations与actions的区别的更多相关文章
- vuex中mutations数据响应
vuex中的mutation需遵守Vue的响应规则: 既然Vuex的store中的状态是响应式的,那么在我们变更状态时,监视状态的Vuex最好在state中初始化好所有的所需属性. 如果需要在对象上添 ...
- vuex中的辅助函数 mapState,mapGetters, mapActions, mapMutations
1.导入辅助函数 导入mapState可以调用vuex中state的数据 导入mapMutations可以调用vuex中mutations的方法 四个辅助函数 各自对应自己在vuex上的自己 2.ma ...
- Vuex入门实践(中)-多module中的state、mutations、actions和getters
一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...
- 在vuex的mutations中使用vue的小技巧
问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...
- vuex(三)actions
actions:既然mutations只能处理同步函数,我大js全靠‘异步回调’吃饭,怎么能没有异步,于是actions出现了... actions和mutations的区别 1.Acti ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- Vue Vuex state mutations
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- vuex中module的命名空间概念
vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.action ...
随机推荐
- http协议的状态码(200,404,503)
http协议的状态码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101( ...
- 不引用第三方变量交换a和b的值
方法一:(可操作字符) a = a^b; b = a^b; a = a^b; 方法二:(可操作字符) a=a+b; b=a-b; a=a-b; 方法三:(不可以操作字符) a=a*b; b=a/b; ...
- js:Array对象常用方法介绍
前言 在js中,数组作为一个特殊的对象.是我们常用的数据格式.今天就来梳理一下常用的数组方法. 1.基础 几种基础的就简单介绍一下:创建数组 var arr1 = new Array(); //括号可 ...
- Python - 采用 contextmanage 简化代码
contextlib.contextmanage Python 2.7 documents: https://docs.python.org/2.7/library/contextlib.html?h ...
- Qt QImage与OpenCV Mat转换
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51029382 应一个朋友的要求,整理总 ...
- ie6下position:fixed定位问题
1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...
- html 页面刷新
JS 脚本 方法1 setInterval 函数 定时局部刷新用到jQuery里面的setInterval方法, 该函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新. setIn ...
- Java n个线程轮流打印数字的问题
一. 实现两个线程.轮流打印出数字.例如以下: bThread --> 10 aThread --> 9 bThread --> 8 aThread --> 7 bThread ...
- 【剑指Offer学习】【面试题63:二叉搜索树的第k个结点】
题目:给定一棵二叉搜索树,请找出当中的第k大的结点. 解题思路 假设依照中序遍历的顺序遍历一棵二叉搜索树,遍历序列的数值是递增排序的. 仅仅须要用中序遍历算法遍历一棵二叉搜索树.就非常easy找出它的 ...
- HDU 1874 畅通project续 (最短路径)
畅通project续 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...