vuex学习之Actions的用法详解
时间:2019-03-31
本文章向大家介绍vuex学习之Actions的用法详解,主要包括vuex学习之Actions的用法详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter permission_handler 权限插件的使用详解
- Flutter使用JsBridge方式处理Webview与H5通信的方法
- flutter 怎么实现app整体灰色效果
- 解决android studio中使用monitor工具无法打开data文件夹问题
- Android安装应用 INSTALL_FAILED_DEXOPT 问题及解决办法
- php简单检测404页面的方法示例
- thinkPHP3.2使用RBAC实现权限管理的实现
- Flutter以两种方式实现App主题切换的代码
- PHP中非常有用却鲜有人知的函数集锦
- PHP针对redis常用操作实例详解
- thinkPHP5使用Rabc实现权限管理
- PHP实现cookie跨域session共享的方法分析
- VS Code开发React-Native及Flutter 开启无线局域网安卓真机调试问题
- Laravel5.4简单实现app接口Api Token认证方法
- PHP生成zip压缩包的常用方法示例