溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們在寫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>
<h4>{{num}}</h4>
<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方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
