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