vuex实现像调用模板方法一样调用Mutations方法


Posted in Javascript onNovember 06, 2019

我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理?

我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案

第一步在我们自己创建模板a.vue里引入我们的mapMutations

代码如下:

import {mapState,mapMutations} from 'vuex'

注:此处的mapMutations就是我们要引入,而你对比state的方法其实就是引入mapState

第二步在模板的<script>标签里添加methods属性,并加入mapMutations

代码如下:

<script>

 import store from '@/store'

 import {mapState,mapMutations} from 'vuex'

 export default{

  data(){

   return{


   }

  },

computed:mapState(["num"]),

  methods:mapMutations([//只关注此栏

  

  'jia'

  

  ]),

  store

 }

</script>

第三步在模板中直接写入

<template>

 <div>

  <h3>{{num}}</h3> 

<button @click="jia">+</button><!--此处--> 

<div>

</template>

补充部分:store.js代码

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state={//状态对象

num:0,

}

const mutations={//触发状态

jian(state){

state.num++

},

}

测试: 点击button按钮它会一直加加

以上这篇vuex实现像调用模板方法一样调用Mutations方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 读取图片文件的大小
Jun 25 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
vuex actions异步修改状态的实例详解
Nov 06 #Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 #Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 #Javascript
vuex存值与取值的实例
Nov 06 #Javascript
node省市区三级数据性能测评实例分析
Nov 06 #Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 #Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 #Javascript
You might like
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
php命令行用法入门实例教程
2014/10/27 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
深入了解js原型模式
2019/05/30 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python3.2中Print函数用法实例详解
2015/05/19 Python
详解Python_shutil模块
2019/03/15 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
周年庆典主持词
2014/04/02 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2014年学生工作总结
2014/11/20 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
TypeScript 内置高级类型编程示例
2022/09/23 Javascript