vue中的Actions
actions异步修改状态
actions和mutations是类似的,不同之处在于:
- Action提交的是Mutation,不能够直接修改state中的状态,而Mutations是可以直接修改state中状态的;
- Action是支持异步操作的,而Mutations只能是同步操作。
还是通过代码来理解吧
1、在store.js中定义一个常量actions,如下:
const mutations = {//注册事件 type:add 回调第一个参数是stateadd(state,val){state.count++},reduce(state, val){state.count --}
}
const actions = {
//这里的actionAdd是组件中和所触发的事件相对应的方法
actionAdd(context){
context.commit(‘add’)//这里的add是mutations中的方法
},
//这里是通过参数结构来简化代码。
actionReduce( { commit } ){
commit(‘reduce’)
}
}
Actions接受一个context对象参数,该参数具有和store实例相同的属性和方法,所以我们可以通过context.commit()提交mutations中的方法,或者可以通过context.state和context.getters去获取state和getters。
context作为上下文对象,可以简单的理解成store实例,有共享store实例的属性和方法的权利,但是切记:context并不是store实例本身。
{ commit } 这里直接把commit为属性的对象传过来,可以让代码简单明了。
2、同样的,我们需要将actions导出去
export defualt new Vuex.Store({state, mutations, actions
})
3、分发action:在组件中可以通过this.$store.dispatch分发action,或者使用mapActions辅助函数将methods映射为store.dispatch调用。
Action 通过 store.dispatch 方法触发
add(){this.$store.dispatch('actionAdd')},reduce(){this.$store.dispatch('actionReduce')}
Actions支持同样的载荷方式和对象进行分发:
add(){this.$store.dispatch('actionAdd', {num: 20})},reduce(){this.$store.dispatch({type:'actionReduce', num : 10})}
在actions里对应的方法中第二个参数接受分发是传递的值。
使用mapActions辅助函数
<button @click = 'actionAdd'>+</button>
<button @click = 'actionReduce'>-</button>
//同样需要导入mapActions辅助函数
import { mapState, mapMutations, mapActions } from 'vuex'
methods: {
<span class="hljs-comment">//如果名字不同,使用mapActions辅助函数的对象参数</span>
<span class="hljs-comment">//...mapActions( { add: 'actionAdd', reduce: 'actionReduce'} )</span><span class="hljs-comment">//当action中的函数名和组件节点的方法名相同的时候,使用mapActions辅助函数的数组参数</span>
...mapActions( [<span class="hljs-string">'actionAdd'</span>, <span class="hljs-string">'actionReduce'</span>] )
}
如果觉得以上不好理解,看下面代码,哈哈,这是写笔记的过程中尝试出来的(纯属瞎玩,正真开发是不带这么干的)。
//组件通过触发事件去调用actions中的方法,进而调用mutations中的方法add(){console.log(this.$store._actions)this.$store._actions.actionAdd[0]()},reduce(){this.$store._actions.actionReduce[0]()}
为什么要这样做,我们先把store打印出来看看里边究竟是什么鬼便一目了然:
然后我们_action展开:
发现_action对象的两个属性就是我们在store.js的actions里定义的两个函数,值是分别是一个长度为1的数组。所以我们可以通过下面的这种方法也可以触发action中的方法,进而触发mutations中的方法。
这种方式仅仅是为了理解它是怎么一回事,在真正的开发中是不能这样做的,且不说代码乱,更重要的显示不专业啊。_
</div>转:https://www.jianshu.com/p/06bb7ad9adbf
vue中的Actions相关推荐
- vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
- vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
- 只需2步,教你在Vue中设置登录验证拦截
摘要:两步教你在Vue中设置登录验证拦截! 本文分享自华为云社区<两步教你在Vue中设置登录验证拦截!>,作者: 灰小猿 . 今天在做vue和springboot交互的一个项目的时候,想要 ...
- 如何在Vue中使用websocket?
什么是WebSocket : WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范. W ...
- vue中事件监听watch
vue中的watch实际上是用来监听vue实例中的数据变化. 监听String <template><div @click="stringClick">{{ ...
- Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...
- vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...
- vue中的方法 methods 定义时不要使用箭头函数
今天在vue中引入vuex的时候出现了错误,解决了一个多少时,总结如下: vuex 的使用: vuex就是一个状态管里中心 也好比一个仓库 细分可分为五个部分,这是我不考虑 module 分别是 st ...
- vue中拿到接口,并获取数据,渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法 前提 ...
最新文章
- django1.4.5配置静态文件(img,css,js)访问
- MySQL中一个双引号错位引发的血案
- 重磅!阿里云MongoDB 5.0发布,速来围观新特性
- 免费和开源世界里面有很多好的邮件服务器
- Android开发笔记(一百三十三)导航视图NavigationView
- 量子计算机加密货币,量子计算机会打击到加密货币吗?
- 2019-9-9,中兴笔试
- 跟我一起学习VIM - vim插件合集
- scheme 语言概述
- python3读取python2的npy文件
- python计算偶数平方和_如何使用Python和Numpy计算r平方?
- xbox手柄电脑怎么测试软件,win10电脑怎么连接xbox手柄?win10电脑连接xbox手柄的详细步骤...
- R语言Fisher检验的workspace问题
- 如何将 M1 Mac(MacBook Pro、Air、iMac、Mac mini)恢复出厂设置?
- HTML5在线摄像头应用
- win10系统下载中文版 64位32位 官方版​
- python的内置函数功能[翻译]
- SequenceToSequence
- 三星java遗忘的勇士_顺位不高的无名小辈,敢打敢拼的悍将,永不放弃的代表人物!...
- W05 - 999、云小蜜人工智能训练师