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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
Vite和Vue CLI的优劣
Jan 30 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
php计算给定时间之前的函数用法实例
2015/04/03 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
如何实现iframe父子传参通信
2020/02/05 Javascript
token 机制和实现方式
2020/12/15 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
Python选课系统开发程序
2016/09/02 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Django model序列化为json的方法示例
2018/10/16 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
《草虫的村落》教学反思
2014/02/16 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
企业整改报告范文
2014/11/08 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
公司表扬稿范文
2015/05/05 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android