vuex action 与mutations 的区别
面试没说清楚。这个太丢人回来整理下:
事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。
- Vuex.Store({
- state,
- actions,
- mutation
- });
- vuex 真正限制你的只有 mutation 必须是同步的这一点,在vue中,
- 只有mutation才能正真改变VUEX stroe中的state,
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作,如果有异步操作那么就用action 来提交mutation
- Mutation 必须是同步函数
- 一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:
- mutations: {
- someMutation (state) {
- api.callAsyncMethod(() => {
- state.count++
- })
- }
- }
- 现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。
然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,
devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx')
提交 mutation,或者使用 mapMutations
辅助函数将组件中的 methods 映射为 store.commit
调用(需要在根节点注入 store
)。
- import { mapMutations } from 'vuex'
- export default {
- // ...
- methods: {
- ...mapMutations([
- 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
- // `mapMutations` 也支持载荷:
- 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
- ]),
- ...mapMutations({
- add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
- })
- }
- }
如果想要获取对应的状态你就可以直接使用this.$store.state
获取,当然,也可以利用vuex
提供的mapState
辅助函数将state
映射到计算属性中去,如.
- const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
Action去comit一个mutation。它要指定去commit哪一个mutation,然后指定结束之后要做什么什么事情就要给出一个函数,所以说mutation的构成有两点名称和函数。
- const store = new Vuex.Store({
- state: {
- count:
- },
- mutations: {
- increment (state) {
- state.count++
- }
- },
- actions: {
- increment (context) {
- context.commit('increment')
- }
- }
- })
action 异步操作
- actions: {
- incrementAsync ({ commit }) {
- setTimeout(() => {
- commit('increment')
- }, )
- }
- }
vuex action 与mutations 的区别的更多相关文章
- JSF Action 与ActionListener的区别
JSF Action 与ActionListener的区别 标签: 杂谈 事件 检验 参数 事件产生 页面跳转 Action 有 无参数,不传入当前控件,有返回值 当铵钮被单击 ...
- Action和Fuc的区别
Action和Fuc的区别,参数和具体用法
- 072——VUE中vuex之使用mutations修改购物车仓库数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...
- 在Vuex使用 以及 dispatch和commit来调用mutations的区别
main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: &q ...
- Vuex - state , getters , mutations , actions , modules 的使用
1, 安装 vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...
- VUEX action解除页面耦合
最近项目中需要用到vue+vuex来实现登出跳转功能,老大指派任务要用action解除页面耦合,刚从vue深渊晕晕乎乎爬出来的我是一脸懵逼啊...啥是解除耦合...网上vuex的资料太少了,vuex手 ...
- 如何在 vuex action 中获取到 vue 实例
问题:在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框(饿了吗 的 message 弹框), 由于$message 是挂在 Vue原型链上的方法 (Vue.prototype.$m ...
- dao层、service和action的运用和区别
DAO层叫数据访问层,全称为data access object,属于一种比较底层,比较基础的操作,对于数据库的操作,具体到对于某个表的增删改查, 也就是说某个DAO一定是和数据库的某一张表一一对应的 ...
随机推荐
- 第26月第20天 springboot
--------------------- 1.pom.xml中添加支持web的模块: <dependency> <groupId>org.springframework.bo ...
- 数据库并发控制及SQL Server的并发控制机制
在多用户和网络环境下,数据库是一个共享资源,多个用户或应用程序同时对数据库的同一数据对象进行读写操作,这种现象称为对数据库的并发操作.显然并发操作可以充分利用系统资源,提高系统效率.虽然如此,但是如果 ...
- 【CentOS】JDK的安装
FTP文件上传方式(推荐) # 解压 tar zxvf jdk-9_linux-x64_bin.tar.gz # 修改profile文件 sudo vi /etc/profile # 在文件结尾添加如 ...
- Shiro入门 - 通过自定义Realm连数数据库进行认证
添加shiro-realm.ini文件 [main] #自定义Realm myRealm=test.shiro.MyRealm #将myRealm设置到securityManager,相当于Sprin ...
- synchronized底层实现原理&CAS操作&偏向锁、轻量级锁,重量级锁、自旋锁、自适应自旋锁、锁消除、锁粗化
进入时:monitorenter 每个对象有一个监视器锁(monitor).当monitor被占用时就会处于锁定状态,线程执行monitorenter指令时尝试获取monitor的所有权,过程如下:1 ...
- AIDL通信过程中设置死亡代理
关于AIDL的使用参考学习: https://blog.csdn.net/u011240877/article/details/72765136 https://blog.csdn.net/iromk ...
- 音乐app各部分笔记(二)
7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步 progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事 svg 中 ...
- 配置中文分词器 IK-Analyzer-Solr7
先下载solr7版本的ik分词器,下载地址:http://search.maven.org/#search%7Cga%7C1%7Ccom.github.magese分词器GitHub源码地址:http ...
- C中的malloc/free与C++中的new/delete的用法与区别
1.先介绍malloc/free的用法: 原型函数: void *malloc(long NumBytes); 该函数分配了NumBytes个字节的内容,分配的空间是堆空间 malloc()根据用户所 ...
- java String、StringBuffer、StringBuild、StringTokenizer
StringBuffer线程安全.StringBuilder线程不安全 效率: StringBuilder(线程不安全) > StringBuffer(线程安全) > String Str ...