溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法

發(fā)布時(shí)間：2020-10-26 10:02:27 來(lái)源：腳本之家 閱讀：153 作者：周行知 欄目：web開(kāi)發(fā)

我們?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>

  <h4>{{num}}</h4> 

<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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手