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 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
jquery中post方法用法实例
Oct 21 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
RequireJs的使用详解
Feb 19 Javascript
jquery实现数字输入框
Feb 22 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
微信小程序上传图片实例
May 28 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 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
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
JS中的BOM应用
2018/02/02 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Python制作豆瓣图片的爬虫
2017/12/28 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
学Python 3的理由和必要性
2019/11/19 Python
Python 音频生成器的实现示例
2019/12/24 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python实现石头剪刀布游戏
2021/01/20 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
怎样写好创业计划书的内容
2014/02/06 职场文书
水电工岗位职责
2014/02/12 职场文书
党员干部承诺书
2014/03/25 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
新农村建设典型材料
2014/05/31 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
培训班通知
2015/04/25 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL
virtualenv隔离Python环境的问题解析
2022/06/21 Python