vuex学习之Actions的用法详解


Posted in Javascript onAugust 29, 2017

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态. Action 是异步的,mutation是同步的。

沿用vuex学习---简介的案例:这里是加10 减1

1.在store.js 中 代码为:

import Vue from 'vue'
import Vuex from 'vuex'

//使用vuex模块
Vue.use(Vuex);

//声明静态常量为4
const state = {
  count : 4
};

const mutations = {
  add(state,n){
    state.count +=n.a;
  },
  sub(state){
    state.count--;
  }
};

const actions = {
  //2种书写方式
  addplus(context){ //可以理解为代表了整个的context
    context.commit('add',{a:10}) 
  },
  subplus({commit}){
    commit('sub');
  }
};

//导出一个模块
export default new Vuex.Store({
  state,
  mutations,
  actions
})

2.在App.vue中 代码如下:

<template>
 <div id="app">
   <div id="appaaa">
    <h1>这是vuex的示例</h1>

    <p>组件内部count{{count}}</p>
    <p>
      <button @click = "addplus">+</button>
      <button @click = "subplus">-</button>
    </p>
    </p>

  </div>
 </div>
</template>

<script>
//引入mapGetters 
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
 name:'app',
 data(){
   return {
     
   }
 },
 computed:{
   ...mapState([
     "count"
     ]),
 },
 methods:{
   ...mapActions([
      "addplus",
      "subplus"
     ])
 }

}
</script>

<style>

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Vue通过ref父子组件拿值方法
Sep 12 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
jquery在vue脚手架中的使用方式示例
Aug 29 #jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 #jQuery
es6学习之解构时应该注意的点
Aug 29 #Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 #Javascript
详谈Node.js之操作文件系统
Aug 29 #Javascript
js链表操作(实例讲解)
Aug 29 #Javascript
在页面中引入js的两种方法(推荐)
Aug 29 #Javascript
You might like
解析thinkphp中的导入文件标签
2013/06/20 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python 私有函数的实例详解
2017/09/11 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
目前最全的python的就业方向
2018/06/05 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python logging模块的使用
2020/09/07 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
迟到检讨书800字
2014/01/13 职场文书
护林防火标语
2014/06/27 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书