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 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
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区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP实现文件下载详解
2014/11/27 PHP
3种php生成唯一id的方法
2015/11/23 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python中表示字符串的三种方法
2017/09/06 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
图解Python变量与赋值
2018/04/03 Python
python 同时运行多个程序的实例
2019/01/07 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python wordcloud库安装方法总结
2020/12/31 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
超市采购员岗位职责
2014/02/01 职场文书
《花木兰》教学反思
2014/04/09 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
MySQL多表查询机制
2022/03/17 MySQL