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函数(json)附详细说明
May 25 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
微信JSSDK上传图片
Aug 23 Javascript
Bootstrap布局方式详解
May 27 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
深入了解JavaScript 私有化
May 30 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
PHP4中实现动态代理
2006/10/09 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python实现定时任务
2017/02/08 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
如何用Python 加密文件
2020/09/10 Python
python中entry用法讲解
2020/12/04 Python
如何用python 操作zookeeper
2020/12/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
医学专业毕业生个人的求职信
2013/12/04 职场文书
优秀教师演讲稿
2014/05/06 职场文书
抗震救灾标语
2014/06/26 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python