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的数据交互的更多相关文章

  1. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  2. vue-cli模拟后台数据交互

    作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...

  3. vuejs组件交互 - 01 - 父子组件之间的数据交互

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...

  4. Android客户端和服务器端数据交互

    网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...

  5. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  6. View与Control间的数据交互

    View与Control间的数据交互 1.ViewBag.Name ="Name1" 2.ViewData["VD"] = "view data&qu ...

  7. .net实现与excel的数据交互、导入导出

    应该说,一套成熟的基于web的管理系统,与用户做好的excel表格进行数据交互是一个不可或缺的功能,毕竟,一切以方便客(jin)户(qian)为宗旨. 本人之前从事PHP的开发工作,熟悉PHP的都应该 ...

  8. 无废话ExtJs 入门教程二十[数据交互:AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  9. JSP数据交互

    JSP数据交互   一.jsp中java小脚本 1.<% java代码段%> 2.<% =java表达式%>不能有分号 3.<%!成员变量和函数声明%>二.注释 1 ...

随机推荐

  1. centos7下安装docker(8.1运行容器)

    从今天开始学习docker container 1.docker run 之前我们在学习制作镜像以及制作私有仓库的时候已经用到docker run -it以及docker run -d来临时运行一个容 ...

  2. docker in docker 出现 libltdl.so.7 问题

    # docker ps -adocker: error while loading shared libraries: libltdl.so.7: cannot open shared object ...

  3. (6)sudo命令详解(每周一个linux命令系列)

    首先说句抱歉,最近事情比较复杂,停更了一阵子.我又回来啦 多用户管理 我们常用的windows个人系统虽然可以设置多用户,但是实际上是不可以多用户同时登陆的(这个我实验过,我以前用windows服务器 ...

  4. ucml 查询组件

    查询视图组件通常用于通过某些字段来查询数据,在页面设计处选好需要查询的字段,并设置操作符等信息最后设计页面添加执行查询的按钮即可,页面效果同编辑视图组件. 具体操作示例: 1.添加一个新的查询组件VC ...

  5. python3 day03 大纲

    一. 上次课内容回顾 1. 格式化输出 %d 占位数字 %s 占位字符串 %f 占位小数 "jfklasjkfj%s %d %f" % (值1, 值2, 值3) "{}爱 ...

  6. matlab sign函数用法及实例

    在MATLAB科学计算过程当中,我们经常需要对我们的计算公式或者计算结果检验其符号,,sign函数就给我们提供了这种方便,下面就通过实例介绍一下matlab sign函数 的用法,希望能够给您带来帮助 ...

  7. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  8. ubuntu系统的谷歌浏览器的安装

    Ubuntu 系统通过一下四步能安装谷歌浏览器 1. sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/a ...

  9. 看进程的启动时间长度 + vmstat + jstack 应用

    1.显示进程已运行的时间 $ ps -e -o pid,comm,etime 2.dd不断的向磁盘写入数据,所以bo的值会骤然提高,而cpu的wait数值也变高,说明由于大量的IO操作,系统的瓶径出现 ...

  10. leetcode56:Merge Intervals

    大都是自定义了 Interval的比较方法. 突发奇想 int [] arr=new int[intervals.Count*2]; for(int i=0;i<intervals.Count; ...