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 使用手册(三)
Sep 23 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
总结javascript三元运算符知识点
Sep 28 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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中数字0和空值的区别分析
2014/06/05 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Django模板Templates使用方法详解
2019/07/19 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
浅析Python3 pip换源问题
2020/01/06 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python如何根据时间序列数据作图
2020/05/12 Python
什么是python的必选参数
2020/06/21 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
shell程序中如何注释
2012/02/17 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
房产委托公证书
2014/04/08 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python