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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP文件操作方法汇总
2015/07/01 PHP
php加密解密字符串示例
2016/10/13 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
BootStrap selectpicker
2016/06/20 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
angularjs $http实现form表单提交示例
2017/06/09 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
详解Python中break语句的用法
2015/05/14 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
利用python如何处理nc数据详解
2018/05/23 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python中qutip用法示例详解
2020/10/02 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
高级工程师岗位职责
2013/12/15 职场文书
小学开学标语
2014/07/01 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书