您好,登錄后才能下訂單哦!
這篇文章主要講解了如何使用Vuex中的Mutations,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
在 Vuex 中 store 數(shù)據(jù)改變的唯一方法就是提交 mutations。mutations里面裝著一些改變數(shù)據(jù)方法的集合,這是Vuex 設(shè)計(jì)很重要的一點(diǎn),就是把處理數(shù)據(jù)邏輯方法全部放在 mutations 里面,使得數(shù)據(jù)和視圖分離。
Mutations使用
Vuex 中的 mutations 非常類似于事件,每個(gè) mutations 都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler),也可以理解為{type:handler()},這和訂閱發(fā)布有點(diǎn)類似。先注冊(cè)事件,當(dāng)觸發(fā)響應(yīng)類型的時(shí)候調(diào)用handker(),調(diào)用type的時(shí)候需要用到store.commit方法。
示例:
這個(gè)回調(diào)函數(shù)會(huì)接受state 作為第一個(gè)參數(shù):
const store = new Vuex.Store({ state: { count: 1 }, mutations: { // 事件類型 type 為 increment increment (state) { // 變更狀態(tài) state.count++ } } })
我們不能直接使用store.mutations.increment() 來(lái)調(diào)用,Vuex 規(guī)定必須使用 store.commit 來(lái)觸發(fā)對(duì)應(yīng) type 的方法:
store.commit('increment')
提交載荷(Payload)
載荷簡(jiǎn)單的理解就是往 handler(state) 中傳參 handler(state, pryload) 。
示例:
大多數(shù)情況下,載荷是一個(gè)對(duì)象:
mutations: { // 提交荷載 increment (state, payload) { state.count += payload.amount } }
提交荷載有兩種方式:
// 把載荷和type分開提交 store.commit('increment', { amount: 10 }) // 整個(gè)對(duì)象都作為載荷傳給mutation函數(shù) store.commit({ type: 'increment', amount: 10 })
我們可以根據(jù)自己的喜好來(lái)選擇使用哪種提交方式。
commit
我們可以在組件中使用 this.$store.commit('xxx') 提交 mutations。
示例:
或者可以使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用(需要在根節(jié)點(diǎn)注入 store)。
示例:
在使用mapMutations 輔助函數(shù)之前同樣需要先引入:
<script> import { mapMutations } from 'vuex' export default { computed:{ count(){ return this.$store.state.count } }, methods:{ ...mapMutations([ 'increment', 'decrement' ]) } } </script>
Mutations 需遵守 Vue 的響應(yīng)規(guī)則
Vuex 的 store 中的狀態(tài)是響應(yīng)式的,所以當(dāng)我們變更狀態(tài)時(shí),監(jiān)視狀態(tài)的 Vue 組件也會(huì)自動(dòng)更新。
這也意味著 Vuex 中的 mutations 也需要與使用 Vue 一樣遵守一些注意事項(xiàng),如下所示:
使用常量替代 Mutations 事件類型
使用常量替代 mutations 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用,同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutations 一目了然:
// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'
store.js 文件內(nèi)容如下所示:
// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名 [SOME_MUTATION] (state) { // mutate state } } })
我們知道m(xù)utation 是通過(guò)store.commit('increment')的方式調(diào)用的,其中increment方法是以字符串的形式代入。如果項(xiàng)目小,一個(gè)人開發(fā)的話倒還好,但是項(xiàng)目大了,編寫代碼的人多了,那就麻煩了,因?yàn)樾枰?commit 的方法一多,就會(huì)顯得特別混亂,而且以字符串形式代入的話,一旦出了錯(cuò),很難排查。
所以,在需要多人協(xié)作的大型項(xiàng)目中,最好還是用常量的形式來(lái)處理 mutation。
必須是同步函數(shù)
我們要記住的是,Mutation 必須是同步函數(shù)。
因?yàn)槲覀冎砸ㄟ^(guò)提交 mutation 的方式來(lái)改變狀態(tài)數(shù)據(jù),是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。如果是類似下面這樣異步的話:
mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } }
我們就不知道什么時(shí)候狀態(tài)會(huì)發(fā)生改變,所以也就無(wú)法追蹤了,這與 Mutation 的設(shè)計(jì)初心相悖,所以強(qiáng)制規(guī)定它必須是同步函數(shù)。
store.commit('increment') // 任何由'increment'導(dǎo)致的狀態(tài)變更都應(yīng)該在此刻完成
看完上述內(nèi)容,是不是對(duì)如何使用Vuex中的Mutations有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(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)容。