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>

vuex-Actions的用法的更多相关文章

  1. [Vuex] Perform Async Updates using Vuex Actions with TypeScript

    Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous ...

  2. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  3. 初识vuex vuex 的基本用法

    Vuex 是什么? 官方是这么说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一个完 ...

  4. Vuex的全面用法总结

    1. vuex简介 vuex是专门用来管理vue.js应用程序中状态的一个插件.他的作用是将应用中的所有状态都放在一起,集中式来管理.需要声明的是,这里所说的状态指的是vue组件中data里面的属性. ...

  5. [Nuxt] Update State with Vuex Actions in Nuxt.js

    You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the ...

  6. [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

    You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. ...

  7. [Nuxt] Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

    The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submi ...

  8. Vuex 教程案例:计数器以及列表展示

    本案例github:https://github.com/axel10/Vuex_demo-Counter-and-list 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 从安装到启 ...

  9. vue2.0项目实战(5)vuex快速入门

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具  ...

  10. 个人对vuex的表象理解(笔记)

    一个东西,首先要知道为什么用它,为什么要vuex,官方解释为了解决繁杂事件订阅和广播,那么事件的$dispatch,$on,怎么就复杂了?许多人是不是感觉后者还挺简单的,对的 如果简单小型项目,那么不 ...

随机推荐

  1. TCP Three-way Handshake

    TCP Connection Management Out-of-Order and Duplication(复制) Problem Old segment from previous connect ...

  2. Ajax,跨域,nrm

    一.ajax 原理 和 使用 ajax,即在不重新加载整个网页的情况下,对网页的某部分进行更新. 下面演示ajax 的实现原理 配置: cd ajax 参考:http://www.expressjs. ...

  3. 使用RMAN增量备份处理Dataguard因归档丢失造成的gap

    场景: 备库执行日志应用出现如下报错: Thu Mar 29 11:21:45 2018FAL[client]: Failed to request gap sequence GAP - thread ...

  4. Oracle 触发器(一)

    1)触发器是一种特殊的存储过程,触发器一般由事件触发并且不能接受参数,存储器由语句块去调用:触发器是当某个事件发生时自动地隐式运行. 2)触发器分类: 1.DML触发器: 创建在表上,由DML事件引发 ...

  5. mybatis——学习笔记

    配置文件 <properties resource="dbconfig.properties"></properties> 1. properties 引入 ...

  6. CF1066EBinary Numbers AND Sum(前缀和,二进制)

    题目大意 现在,给你两个位数为 n 和 m 的两个二进制数a,b,现在,我们要进行如下操作: 计算a&b 答案累加上一个操作的值 bbb右移一位,最后一位直接舍弃 现在,请你算出最终的答案,并 ...

  7. Linux-帮助的用法

    Linux帮助使用方法 内部命令:help COMMAND 或 man bash外部命令: (1) COMMAND --help   COMMAND -h --help和-h选项显示用法总结和参数列表 ...

  8. 转:30分钟学会如何使用Shiro

    引自:http://www.cnblogs.com/learnhow/p/5694876.html 本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinniansh ...

  9. UIPickerView的简单使用

    UIPickerView是一个选择器它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活,使用也比较简单.下面做了一个关于天气预报的小Demo 用 UI ...

  10. 【saltstack 集中化管理】

    Master(监控端): Minion(被监控端) 监控: /etc/master: #interface:监控端地址 #自动接受被监控端证书 #saltstack文件根目录位置 #启动监控 被监控: ...