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 相关文章推荐
js常用代码段整理
Nov 30 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
vue.js的简单自动求和计算实例
Nov 08 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
Vue组件化开发思考
2018/02/02 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
python中xrange用法分析
2015/04/15 Python
windows下python连接oracle数据库
2017/06/07 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python cookie反爬处理的实现
2020/11/01 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
网络工程师的自我评价
2013/10/02 职场文书
成教自我鉴定
2013/10/27 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
雾霾停课通知
2015/04/24 职场文书
红色经典电影观后感
2015/06/18 职场文书
保护地球的宣传语
2015/07/13 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS