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>

 

转载于:https://www.cnblogs.com/web-chuanfa/p/9162451.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107476.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • PriorityQueue 源码分析[通俗易懂]

    PriorityQueue 源码分析[通俗易懂]学过数据结构的人应该对Queue队列很熟悉了,队列是一种先进先出(FIFO)的数据结构,所以它出队列的优先级就是进入队列的次序。但我们有时候需要其它的优先级,很多高级语言都会提供带优先级的队列,在Java中就是PriorityQueue了,今天我们来看下PriorityQueue的使用和实现。使用PriorityQueue的使用很简单,如下。publicstaticvoidm…

    2022年6月11日
    35
  • POE设计实战_python异步执行

    POE设计实战_python异步执行二、异步FIFO(1)FIFO基本概念(2)异步FIFO基本概念(3)异步FIFO的作用(4)异步FIFO的读/写指针(5)异步FIFO空/满标志(6)指针计数器的选择(7)二进制与格雷码相互转换三、Spec(1)Functiondescripton(2)Featurelist(3)BlockDiagram(4)Interfacedescription……………

    2025年8月14日
    3
  • centos7重启nginx「建议收藏」

    centos7重启nginx「建议收藏」1.找到nginx的安装位置whereisnginx2.进入该目录下cd/usr/sbin3.重启./nginx-sreload

    2022年8月13日
    8
  • navicat premium注册和激活码-激活码分享

    (navicat premium注册和激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月31日
    5.0K
  • java中数组的下标的数据类型是_java返回数组下标

    java中数组的下标的数据类型是_java返回数组下标packagepractice;publicclassArrayElementsAddIndices{ publicstaticvoidmain(String[]args){ intarray[]={5,4,3,2,1,6,7,8,9}; System.out.println(“原数组中的元素:”); for(inti=0;i<array.length;i++){ System.out.print(array[i

    2022年10月11日
    3
  • java 代码中sql模糊查询Like拼接

    java 代码中sql模糊查询Like拼接Like模糊查询拼接:StringBuilderstringBuilder=newStringBuilder();stringBuilder.append(“selectu.*fromepai_sys_useru”);//写?是可以的是没问题的stringBuilder.append(“whereu.display_nameLikeconcat(‘%’,…

    2022年6月1日
    131

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号