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的一些注意
Dec 06 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
Javascript中replace()小结
Sep 30 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
使用js和canvas实现时钟效果
Sep 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
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
JS跨域总结
2012/08/30 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
简单的三步vuex入门
2018/05/20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python raise的基本使用
2020/09/10 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
应届毕业生求职信
2013/11/30 职场文书
购房意向书
2014/08/30 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
工程移交协议书
2016/03/24 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server