调用Mutation函数的方式

文章目录

调用Mutation函数的方式
- 第一种：this.$store.commit()
- 第二种：将指定的 mutations函数，映射为当前组件的methods函数
减法计算器应用实例

调用Mutation函数的方式

第一种：this.$store.commit()

// 触发mutation
methods: {handle1() {//触发mutations的第一种方式this.$store.commit ( 'add ' )}
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({state: {count: 0,},mutations: {addN (state, step){//变更状态state.count += step}}
})

第二种：将指定的 mutations函数，映射为当前组件的methods函数

this.$store.commit()是触发mutations的第一种方式，触发mutations的第二种方式:

// 1．从vuex中按需导入mapMutations函数
import ( mapMutations ] from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法:

// 2．将指定的 mutations函数，映射为当前组件的methods函数
methods : {...mapMutations ( [ 'sub', 'subN' ])}

减法计算器应用实例

减法计算器示例：

<template><div><!-- 访问共享数据count {{ count }} --><h3>当前最新的count值为：{{ count }}</h3><button @click="btnhandler1">-1</button><button @click="btnhandler2">-N</button></div>
</template><script>
// 1.从 vuex中按需导入mapstate函数
import { mapState, mapMutations } from 'vuex'
export default {data() {return {}},//   2.将全局数据，映射为当前组件的计算属性computed: {...mapState(['count']),},methods: {//  把store中的sub函数 映射为当前组件的mutations...mapMutations(['sub', 'subN']),btnhandler1() {this.sub()},btnhandler2() {this.subN(3)},},
}
</script>

调用Mutation函数的方式相关推荐

前端调用PHP函数的方式
html_entity_decode() <div class="rxzcB fl">{$service.introduction|html_entity_decode ...
在python里调用C函数的三种方式
一个python项目快速开发完以后,常常针对瓶颈进行优化,其中一种方式就是对于性能至关重要的部分,使用C重写,这已经是一种最佳实践.如果整个项目完全使用C,开发效率就没有保障.python运行环境(C ...
C#编码实践：使用委托和特性调用指定函数
2019独角兽企业重金招聘Python工程师标准>>> 建立一个C#控制台应用程序AttributeTest. 建立一个类Operations,代码如下: namespace Att ...
超详细基于Qt平台实现C/C++调用Matlab函数全流程
超详细基于Qt平台实现C/C++调用Matlab函数全流程 1. 基本调用方式介绍 2. 环境配置 3. 将Matlab程序写成函数形式 4. Matlab配置C编译器,将.m文件转换成动态链接库 4 ...
微信小程序如何实现支付功能？看官方文档头疼（使用云函数的方式操作）
先来个效果图 ^_^ 微信支付功能,个人公众号是没有办法进行开发支付功能的,需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行大概500左右) 公众平台的配置可以参考文档,这里 ...
python循环展示大写字母_python调用大写函数python中字典的循环遍历的两种方式
开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...
Python如何用TKinter搭建图形界面窗口，并通过多进程的方式调用功能函数
用Python开发图形界面和程序时,经常会对图形界面的搭建感到失望,或许是由于对图形界面不熟悉的原因吧,总之一想到图形界面,就感觉会很费时.费力,编程的积极性大幅下降.最近,尝试用Tkinter创建了 ...
python函数文档说明调用方式_Python 跨.py文件调用自定义函数说明
0 前言 os.chdir() :用于改变当前python工作的目录到指定的路径 sys.path:是python搜索模块的一个路径集,为list,自定义的包可以把存放路径加进去,之后直接调用包名就行 ...
js方式调用php_js如何调用php函数
js调用php函数的方法:jQuery.ajax({ type: "POST", url: 'your_functions_address.php', dataType: 'jso ...

调用Mutation函数的方式

文章目录

调用Mutation函数的方式

第一种：this.$store.commit()

第二种：将指定的 mutations函数，映射为当前组件的methods函数

减法计算器应用实例

调用Mutation函数的方式相关推荐

最新文章

热门文章