富贵资源网 Design By www.hznty.com
我们在写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方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。