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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Unity 基于eventTriggers的3D场景交互系统「建议收藏」

    Unity 基于eventTriggers的3D场景交互系统「建议收藏」Unity基于eventTriggers的3D场景交互系统  Unity里的3D项目有时候需要大量的交互,而且是无UI的交互。这时候可以像UI系统里,使用eventTrigger去制作交互系统。但是这个缺少自定义功能,所以我写了个自定义交互系统。这个交互系统可以做到什么呢?直接上图(仅为演示DEMO)。点击触发事件移动并且事件复杂的交互  该系统采用的工厂设计模式,将你需要的功能写入EventTriggersDemo,将你的功能码

  • 纯c语言写银行家算法

    纯c语言写银行家算法主要参考链接:https://blog.csdn.net/houchaoqun_xmu/article/details/55540792https://liuyanzhao.com/2932.html(这个是额外贴出可以参考的连接。本文的主要参考链接依旧是第一条)[声明]本文为转载是因为代码大多数都是网上copy的,然后自己也只是微调加实现过,个人认为不可以当原创。代码全部都贴上来了,…

  • Bug.PotPlayer播放视频上下、左右翻转

    Bug.PotPlayer播放视频上下、左右翻转2018/8/8 PotPlayer作为一款全能、绿色的视频播放器倍受喜爱。在使用中偶尔可能会出现播放视频上下倒置、左右翻转的情况,一时让人摸不着头脑。其实是误触了快捷键导致图像颠倒,再次按下快捷键即可恢复。上下倒置的情况,这时在播放界面按下“Ctrl+V”快捷键;界面左上角提示“图像上下翻转:关闭”,视频播放恢复正常。左右翻转时,如果无字幕其实并不影响观看;这时按下快捷键“Ctrl+…

  • pycharm加断点_破地方转CAD

    pycharm加断点_破地方转CAD转自:https://blog.csdn.net/u013088062/article/details/50216015转载于:https://www.cnblogs.com/everfight/p/pycharm_debug.html

  • sm4算法加密解密

    sm4算法加密解密一、基本知识分组加密(英语:Blockcipher),又称分块加密或块密码,是一种对称密钥算法。它将明文分成多个等长的模块(block),使用确定的算法和对称密钥对每组分别加密解密。 对称加密、加密算法主要可以分为两种,一个是非对称加密算法,另一个就是对称加密算法。对称加密简单来说就是有一个明文,通过一个密钥加密之后得到一个密文,这个密文可以通过相同的密要解密得出和原来相同的明文二、sm…

  • Python中的取整、取余运算「建议收藏」

    Python中的取整、取余运算「建议收藏」1.取整运算在Python中取整运算的运算符为//,且取整运算的取整为向下取整,不进行四舍五入例:9//4=2,即9对4取整等于2-9//-4=2,因为-9÷-4=2.25,取整为2那么问题来了,9//-4等于多少呢?9//-4=-3,因为9÷-4应该等于-2.25,那么对-2.25向下取整,应该为-3,而不是-2,所以9//-4=-3那么-9//4呢?-9÷4也应该等于-2.25,所以向下取整,得到-9//4=-3总结:9//4=2-9//-4=29//-4=-3-9//4=-3

发表回复

您的电子邮箱地址不会被公开。

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