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)


相关推荐

  • 补码的表示 以及+-0的问题「建议收藏」

    补码的表示 以及+-0的问题「建议收藏」正数的补码是其本身,也就是原码.负数的补码是各位取反后加1.也就是其反码加1.+0的补码就是其原码,也就是说是00000000而已(对于8位来说)-0的补码是其反码加1,其反码是11111111,当然,其反码加1后就是溢出一个进位后,仍然是00000000.问题出现在(+0)和(-0)上,在人们的计算概念中零是没有正负之分的。于是就引入了补码概念。负数的补码就是对反码加一,而正数不…

  • kafka 集群搭建步骤

    kafka 集群搭建步骤  kafka集群的运行建立在zookeeper基础上,kafka中的消息偏移量信息、kafka集群信息、topic等信息会被存储在zookeeper中。高版本的kafka自带了zookeeper,本文使用独立的zookeeper集群部署kafka集群。前期准备见《Linux环境下,搭建ZooKeeper集群》。一、下载kafka  kafka官网:http://kafka.apache.org/http://kafka.apache.org/downloa

  • 如何在java中输出保留两位小数「建议收藏」

    如何在java中输出保留两位小数「建议收藏」在输出时用以下的代码:System.out.println(String.format(“%.2f”,sum));其中”%.2f”为保留两位小数,sum为要输出的数字。当然,用print输出也是可以的:System.out.print(String.format(“%.2f”,sum));…

  • postman接口自动化测试实战_python API

    postman接口自动化测试实战_python APIApifox介绍Apifox是API文档、API调试、APIMock、API自动化测试一体化协作平台,定位Postman+Swagger+Mock+JMeter。通过一套系

  • linux mysql 软连接_linux 软连接的使用[通俗易懂]

    linux mysql 软连接_linux 软连接的使用[通俗易懂]软连接是linux中一个常用命令,它的功能是为某一个文件在另外一个位置建立一个同不的链接。具体用法是:ln-s源文件目标文件。当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在其它的目录下用ln命令链接(link)就可以,不必重复的占用磁盘空间。例如:ln-s/usr/local/mysql/bin/mysql/usr/bin…

  • 简单使用FusionCharts(Free)[通俗易懂]

    简单使用FusionCharts(Free)[通俗易懂]介绍FusionChartsFree是一个跨平台,跨浏览器的flash图表组件解决方案,能够被ASP.NET,ASP,PHP,JSP,ColdFusion,RubyonRails

发表回复

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

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