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 ...
 
随机推荐
- 路由器不重启,是否ip就永远不变
			
今天发现公司的公网ip突然变了,没有人去动过路由器怎么会这样呢?经查原因如下:1.不一定,IP变化是每一次拨号重新获取的.2.路由器重启了,会自动拨号,获得IP3.但如果说因各种原因,掉线,路由器也会 ...
 - HashMap的扩容机制---resize()
			
虽然在hashmap的原理里面有这段,但是这个单独拿出来讲rehash或者resize()也是极好的. 什么时候扩容:当向容器添加元素的时候,会判断当前容器的元素个数,如果大于等于阈值---即当前数组 ...
 - mysql5.6.8源码安装
			
内核: [root@opop ~]# cat /etc/centos-release CentOS release 6.8 (Final)[root@opop ~]# uname -aLinux op ...
 - postfix 邮件服务的安装及详解
			
该实验系统:cetnos 6.5 sendmail:性能好,设置复杂,适合老手 qmail:体积小260+k ,模块化.需要做二次开发,适合对邮件性能有要求的 postfix:前身是sendmail, ...
 - USB to UART
			
USB to UART: 芯片选用CH340: 电源部分连接两个电容分别是0.1微法和10微法: 晶振连接12MHz; D+ D- 连接单片机的D+ D-
 - 【Codeforces 1105E】Helping Hiasat
			
Codeforces 1105 E 题意:给你m个事件,每个事件可能是以下两种之一: \(1\),代表此时可以更改用户名 \(2\) \(s\),代表\(s\)来查看是否用户名与其名字相符 一共有\( ...
 - Android学习之基础知识十—内容提供器(Content Provider)
			
一.跨程序共享数据——内容提供器简介 内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能 ...
 - Tensorflow[源码安装时bazel行为解析]
			
0. 引言 通过源码方式安装,并进行一定程度的解读,有助于理解tensorflow源码,本文主要基于tensorflow v1.8源码,并借鉴于如何阅读TensorFlow源码. 首先,自然是需要去b ...
 - PHP实现栈数据结构
			
利用php面向对象思想,栈的属性有top.最大存储数.和存储容器(这里利用了php数组). 代码如下:实现了入栈.出栈.遍历栈的几个方法: <?php class Stack{ const MA ...
 - odoo订餐系统之类型设计
			
这次开发的模块是订餐的类型设计,比如大荤 小荤 蔬菜 米饭 等基本数据.1.设计model类,很简单就一个字段: class MyLunchProductionCategory(osv.Model): ...