vuex的数据交互
methods:{
...mapMutations({aaa:hs}) //将mutations的方法暴露出来,进行调用 aaa是他的名字
...mapActions(['hs']) //将actions的方法暴露出来,进行调用
hss(){
this.$store.commit('hs') //通过某个方法让它 提交
}
hss2(){
this.$store.dispatch('hs') //通过某个方法让它 提交 actions里
}
}
mounted(){
this.$store.commit('hs') //可以在这里去调取数据
this.$store.dispatch('hs') //通过某个方法让它 提交 actions里
}
computed:{
...mapGetters(['hs']) //将Getters返回的方法内的数据暴露出来,进行调用
...mapState(['count']) //将State的数据暴露出来,进行调用
}
computed: mapState({
//使用箭头函数
count: state => state.count,
//传入字符串 ‘count’ 等同于 `state => state.count`
count1: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
count2(state) {
return state.count + this.id
}
})
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
store.commit('increment', {
amount:
}) //将数据提交到 mutations里面并且 传了一个参数payload.amount
actions: {
increment (context) {
context.commit('increment')
}
}
actions: {
increment ({ commit }) {
commit('increment')
}
}
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, )
})
}
}
现在你可以这样做:
store.dispatch('actionA').then(() => {
// 将actionA 提交到 actions里 并且 将actionA 返回的Promise对象接收并输出
})
actions: {
//被提交到actionB 将actionA 提交到 actions里 并且 将actionA 返回的Promise对象接收并输出
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
vuex的数据交互的更多相关文章
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- vuejs组件交互 - 01 - 父子组件之间的数据交互
父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...
- Android客户端和服务器端数据交互
网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...
- 使用Jquery.AJAX方法和PHP后台数据交互小结
使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
- View与Control间的数据交互
View与Control间的数据交互 1.ViewBag.Name ="Name1" 2.ViewData["VD"] = "view data&qu ...
- .net实现与excel的数据交互、导入导出
应该说,一套成熟的基于web的管理系统,与用户做好的excel表格进行数据交互是一个不可或缺的功能,毕竟,一切以方便客(jin)户(qian)为宗旨. 本人之前从事PHP的开发工作,熟悉PHP的都应该 ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- JSP数据交互
JSP数据交互 一.jsp中java小脚本 1.<% java代码段%> 2.<% =java表达式%>不能有分号 3.<%!成员变量和函数声明%>二.注释 1 ...
随机推荐
- 老男孩Python全栈视频
链接:https://pan.baidu.com/s/1c1JOCL1w-vnYGkrhElk_GQ 密码私聊我
- 360极速浏览器极速模式通过hosts文件切换兼容模式bat脚本
注意:需要获得管理员权限执行,且后缀为 .bat @echo offsetlocal enabledelayedexpansionset url=被替换的域名set ip=替换的域名set strNe ...
- heap堆算法的使用分析
新生代 --复制算法 老年代 --标记压缩清除算法 分代 分区思想 垃圾回收的任务是识别和回收垃圾对象进行内存清理,为了让垃圾回收器可以高效的执行,大部分情况下,会要求系统进入一个停顿的状态. 停顿 ...
- AI 信息论
信息论,主要用于量化信息. 事件发生的概率越大,包含的信息就越少.例如“太阳从东边升起”,信息量就很少. 1.自信息(self-information) 两个独立事件发生所包含的信息,等于各自发生包含 ...
- linux内存管理源码分析 - 页框分配器
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 最近在学习内核模块的框架,这里做个总结,知识太多了. 分段和分页 先看一幅图 也就是我们实际中编码时遇到的内存地 ...
- wifidog源码分析 - 客户端检测线程
引言 当wifidog启动时,会启动一个线程(thread_client_timeout_check)维护客户端列表,具体就是wifidog必须定时检测客户端列表中的每个客户端是否在线,而wifido ...
- UVA1626 - Brackets sequence(区间DP--括号匹配+递归打印)
题目描写叙述: 定义合法的括号序列例如以下: 1 空序列是一个合法的序列 2 假设S是合法的序列.则(S)和[S]也是合法的序列 3 假设A和B是合法的序列.则AB也是合法的序列 比如:以下的都是合法 ...
- Luogu4886 快递员 点分治
传送门 淀粉质好题啊qaq 我们先考虑随便选择一个点作为邮递中心,通过移动邮递中心找到更优的位置.将路径最大值求出,并将路径最大值对应的那一些路径拿出来考虑.可以知道,如果说这些路径中存在一条经过当前 ...
- 轻量级WebApi请求插件:PostMan
时间很宝贵,废话不多说,只说三句,如下: 十年河东,十年河西,莫欺骚年穷!~_~ 打错个字,应该是莫欺少年穷! 学历代表你的过去,能力代表你的现在,学习代表你的将来. 学无止境,精益求精. 本次介绍的 ...
- CSharp 案例:用 Dynamic 来解决 DataTable 数值累加问题
需求说明 给定一个 DataTable,如果从中取出数值类型列的值并对其累加? 限制:不知该列是何种数值类型. 解决方案 1.将表转换为 IEnumerable<dynamic>,而后获取 ...