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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 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
谈谈PHP语法(2)
2006/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
php生成无限栏目树
2017/03/16 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jquery图片切换插件
2015/03/16 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python Django批量导入数据
2016/03/25 Python
python实现自动发送邮件
2018/06/20 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python中比较两个列表的实例方法
2019/07/04 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
企业治理工作自我评价
2013/09/26 职场文书
内科护士实习自我鉴定
2013/10/17 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
女儿满月酒致辞
2015/07/29 职场文书
初一数学教学反思
2016/02/17 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android