快捷導(dǎo)航

vuex?mutations的兩種調(diào)用方法小結(jié)

更新時(shí)間：2022年03月28日 11:21:43 作者：程序員徐小白

這篇文章主要介紹了vuex?mutations的兩種調(diào)用方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

mutations的調(diào)用方法

直接通過$store.commit調(diào)用

<button @click="$store.commit('mutations中的方法名','可帶參數(shù)')">調(diào)用</button>

不需要再進(jìn)行其他配置

通過在methods中注冊(cè)方法調(diào)用

//先引入mapMutations
import {mapMutations} from 'vuex'
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? msg:"hello vuex"
? ? ? ? }
? ? },
? ? //注冊(cè)方法，三個(gè).是屬性展開符，可以將mapMutations中的方法展開后放入methods中，就可以直接調(diào)用了
? ? methods:{
? ? ? ? ...mapMutations(['mutations中的方法名稱'])
? ? }
}

<button @click="mutations中的方法名稱('可帶參數(shù)')">-</button>

細(xì)數(shù)mutations的用法

為什么要用mutations

使用mutations的好處是可以跟蹤到是哪里調(diào)用了mutations里的方法，在嚴(yán)格模式下調(diào)用mutations也不會(huì)報(bào)錯(cuò)。

如果用其它方法的話上面說的兩個(gè)好處都不存在。

用法

先定義個(gè)mutations對(duì)象，然后定義指定的方法就可以了，很簡(jiǎn)單，代碼示例：

 ? state: {
? ? ? ? isHome: true
? ? },
?
? ? mutations: {
? ? ? ? changeIsHome(state) { ? ? ? ?// 這里將state傳進(jìn)來了
? ? ? ? ? ? state.isHome = false
? ? ? ? }
? ? }

在stote.js中定義好mutations方法之后，就在vue中觸發(fā)事件的時(shí)候調(diào)用mutations方法就可以了，調(diào)用方法示例：

? // 這里示例是在created方法中觸發(fā)mutations方法
? created() {
? ? this.$store.commit('changeIsHome') ? ?// 這就是調(diào)用的方法
? },

執(zhí)行：this.$store.commit('changeIsHome')；就可以調(diào)用mutations方法了。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
在Vue頁(yè)面中如何更優(yōu)雅地引入圖片詳解
我們?cè)赩ue.js項(xiàng)目中經(jīng)常需要引用圖片,所以下面這篇文章主要介紹了關(guān)于在Vue頁(yè)面中如何更優(yōu)雅地引入圖片的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
在Vue中使用icon 字體圖標(biāo)的方法
這篇文章主要介紹了在Vue中使用icon 字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用
這篇文章主要介紹了Vue中JS動(dòng)畫與Velocity.js的結(jié)合使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
Vue3自定義指令語法圖文詳解
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
圖文詳解vue框架安裝步驟
我們?cè)诒酒獌?nèi)容里給大家整理了關(guān)于vue框架安裝的步驟以及需要注意的地方，有需要的朋友們學(xué)習(xí)下。
2019-02-02
vue-cli3.0配置及使用注意事項(xiàng)詳解
這次給大家?guī)韛ue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項(xiàng)有哪些？本文通過實(shí)戰(zhàn)案例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-09-09
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助
2022-03-03
在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or
這篇文章主要給大家介紹了關(guān)于解決vue3傳屬性時(shí)報(bào)錯(cuò)[Vue?warn]:Component?is?missing?template?or?render?function的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01