vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
更新時間：2019年11月06日 10:26:04 作者：周行知
今天小編就為大家分享一篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們在寫vue項目中如果，我們發(fā)現(xiàn)vuex中<button @click="$store.commit('jia')">-</button>是十分麻煩的，我們想直接寫成@click中的jia，我們應(yīng)該如何處理？
我們可以想一想我們在解決state時是如何解決的，為此我們將介紹一個與解決state相同方案
第一步在我們自己創(chuàng)建模板a.vue里引入我們的mapMutations
代碼如下:
import {mapState,mapMutations} from 'vuex'
注：此處的mapMutations就是我們要引入，而你對比state的方法其實就是引入mapState
第二步在模板的<script>標(biāo)簽里添加methods屬性，并加入mapMutations
代碼如下:
<script>
import store from '@/store'
import {mapState,mapMutations} from 'vuex'
export default{
data(){
return{
}
},
computed:mapState(["num"]),
methods:mapMutations([//只關(guān)注此欄
'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={//狀態(tài)對象
num:0,
}
const mutations={//觸發(fā)狀態(tài)
jian(state){
state.num++
},
}
測試： 點擊button按鈕它會一直加加
以上這篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli安裝使用less的教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Vue+ElementUI使用vue-pdf實現(xiàn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI使用vue-pdf實現(xiàn)預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)立體計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Vue Element前端應(yīng)用開發(fā)之界面語言國際化
我們開發(fā)的系統(tǒng)，一般可以不用考慮語言國際化的問題，大多數(shù)系統(tǒng)一般是給本國人使用的，而且直接使用中文開發(fā)界面會更加迅速 一些，不過框架最好能夠支持國際化的處理，以便在需要的時候，可以花點時間來實現(xiàn)多語言切換的處理，使系統(tǒng)具有更廣泛的受眾用戶。2021-05-05
使用vue自定義指令開發(fā)表單驗證插件validate.js
今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過程,需要的朋友可以參考下2019-05-05
Vue.js基礎(chǔ)學(xué)習(xí)之class與樣式綁定
這篇文章主要為大家介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了Vue中emit事件無法觸發(fā)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
基于vue-cli3創(chuàng)建libs庫的實現(xiàn)方法
這篇文章主要介紹了基于vue-cli3創(chuàng)建libs庫的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文主要介紹了如何在Vue中動態(tài)添加類名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07