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

我们在写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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfo(state,nickName) { state.nickName = nickName; }, updateCartCount(state,cartCount) { state.cartCount

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • 在Vue-cli里应用Vuex的state和mutations方法

    首先,必须安装vuex的依赖 npm install vuex --save-dev 创建专属vuex的文件夹和store.js: store.js里引入并应用插件vuex 定义常量state,用于存放变量&&定义常量mutations存放对变量的处理方法: 导出Vuex.store的实例,参数为刚才定义的state和mutations: 最后,还要在入口js文件引入到Vue的实例之中: 之后,我们就可以在组件当中,调用到我们在vuex存放的变量和方法: 首先:在父组件调用变量headTi

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

  • Vuex modules模式下mapState/mapMutations的操作实例

    当我们使用 Vuex 实现全局状态维护时,可能需要将状态值划分多个模块,比如一些 root 级的用户登录状态,token,用户级的用户信息,购物车级的购物车信息. 下面我们实例演示下如何在多模块下使用 mapState/mapMutations. modules 只作用于属性,属性会归属在相应的模块名的命名空间下. mutations, actions, getter 没有命名空间的限定,所以要保证全局的唯一性,否则后者会覆盖前者 store/index.js import Vue from '

  • vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

    在store.js里面添加如下的代码就可以了: // 热重载 if (module.hot) { // 指定要监控的文件 module.hot.accept(['./mutations'], () => { const mutations = require('./mutations').default // Vuex 提供的热重载接口 store.hotUpdate({ mutations }) }) } 以上这篇vue-cli整合vuex的时候,修改actions和mutations,实现热

  • Vuex之理解Mutations的用法实例

    1.什么是mutations? 上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation! 通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离. 2.怎么用mutation

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

    我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v

  • vuex如何在非组件中调用mutations方法

    目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor

  • vuex新手进阶篇之改变state mutations的使用

    目录 1. 设置改变state的mutations事件 2.提交mutations事件(常用的两种方法) 总结 紧接上篇文章,本篇文章讲vuex ,如何去改变state ,mutations的使用,我依然使用了vuex的modules 1. 设置改变state的mutations事件 index.js dict.js 2.提交mutations事件(常用的两种方法) <template> <div> <div> 改变vuex index.js 下的state <d

  • jquery.Ajax()方法调用Asp.Net后台的方法解析

    利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod]   public static string SayHello()   {        return "Hello Ajax!";   }  using System.Web.Script.Services; [WebMe

  • JS/jquery实现一个网页内同时调用多个倒计时的方法

    JS/jquery实现一个网页内同时调用多个倒计时的方法

    本文实例讲述了jquery/js实现一个网页内同时调用多个倒计时的方法.分享给大家供大家参考,具体如下: 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! var plugJs={ stamp:0, tid:1, stampnow:'<?php echo NOW_TIME;?>',//统一开始时间戳 intervalTime:function(){ if(plugJs.stamp > 0){ var day = Ma

  • python 调用win32pai 操作cmd的方法

    实例如下: #coding=utf-8 import subprocess from time import * import win32api import win32con import win32gui subprocess.Popen('C:\windows\system32\cmd.exe') sleep(1) a=65;b=66;c=67;d=68;e=69;f=70;g=71;h=72;i=73;j=74;k=75 l=76;m=77;n=78;o=79;p=80;q=81;r=8

  • Mybatis传list参数调用oracle存储过程的解决方法

    怎么利用MyBatis传List类型参数到数据库存储过程中实现批量插入数据? MyBatis中参数是List类型时怎么处理?大家都知道MyBatis批处理大量数据是很难做到事务回滚的(事务由Spring管理),都将逻辑写在存储中又是及其头疼的一件事(参数长度也有限制),那么我想的是将参数在后台封装为单个或多个list集合,直接通过MyBatis将此参数传到数据库存储过程中,一来摆脱了MyBatis批量插入数据的诸多限制(例如:不能实时返回主键.foreach标签循环集合长度有限制),二来就是在存

  • Mybatis调用视图和存储过程的方法

    现在的项目是以Mybatis作为O/R映射框架,确实好用,也非常方便项目的开发.MyBatis支持普通sql的查询.视图的查询.存储过程调用,是一种非常优秀的持久层框架.它可利用简单的XML或注解用语配置和原始映射,将接口和java中的POJO映射成数据库中的纪录. 一.调用视图 如下就是调用视图来查询收益明细,sql部分如下: <!-- 获取明细 --> <select id ="getContactEarnsDetail" resultType= "ja

随机推荐