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

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

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

mutations的調(diào)用方法

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

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

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

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

//先引入mapMutations
import {mapMutations} from 'vuex'
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? msg:"hello vuex"
? ? ? ? }
? ? },
? ? //注冊方法，三個.是屬性展開符，可以將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也不會報錯。

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

用法

先定義個mutations對象，然后定義指定的方法就可以了，很簡單，代碼示例：

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue中keepAlive組件的作用和使用方法詳解
vue里提供了keep-alive組件用來緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下
2021-07-07
Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法
這篇文章主要介紹了Vue通過阿里云oss的url連接直接下載文件并修改文件名的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價值,感興趣的可以了解一下
2024-03-03
一文教會你vue中使用async和await
async和await作為異步函數(shù),語法很簡單,就是在函數(shù)前面加上async 關(guān)鍵字,來表示它是異步的,下面這篇文章主要給大家介紹了如何通過一文教會你vue中使用async和await的相關(guān)資料,需要的朋友可以參考下
2022-10-10
VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺請求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)
這篇文章主要為大家介紹了vue限制輸入數(shù)字或者保留兩位小數(shù)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
12 種使用Vue 的最佳做法
這篇文章主要介紹了12 種使用Vue 的最佳做法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明
這篇文章主要介紹了Vue中router.beforeEach與beforeRouteEnter的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式，本文分為兩種方法給大家介紹，在這小編比較推薦使用第二種使用 deep 深度選擇器，感興趣的朋友跟隨小編一起看看吧
2022-12-12
一文秒懂Vue3的v-model
v-model 是 Vue 內(nèi)置的指令作為屬性接收一個變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧
2023-02-02