您好,登錄后才能下訂單哦!
這篇文章主要講解了“vuex怎么在非組件中調(diào)用mutations方法”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vuex怎么在非組件中調(diào)用mutations方法”吧!
一般情況下調(diào)用 mutations.js 中的方法都是在組件中,如果想在非組件中調(diào)用,則需要使用如下方式
import {mapMutations} from 'vuex' import {SET_IS_LOGIN} from 'store/mutation-types' export default { methods: { ...mapMutations({ set_is_login: SET_IS_LOGIN }), init() { this.set_is_login(true) } } }
import store from 'store' import {SET_IS_LOGIN} from 'store/mutation-types' function init() { store.commit(SET_IS_LOGIN, true) }
是唯一一種方式來修改state中的狀態(tài)的;在組件的自定義方法中,使用this.$store.commit(‘對應(yīng)mutations中的方法’, 新的值)方法,把新的值提交給mutations中相對應(yīng)的方法,mutations屬性中的每個方法中有兩個參數(shù),分比為state和payload;state其實(shí)就是vuex中的state屬性,payload叫做mutations的載荷,其實(shí)就是傳過來的值。一般payload傳的是一個對象,這樣可以包含多個字段并且記錄的 mutation 會更易讀:
mutations: { increment (state, payload) { state.count += payload.amount } }
store.commit('increment', { amount: 10 })
提交 mutation 的另一種方式是直接使用包含 type 屬性的對象:
store.commit({ type: 'increment', amount: 10 })
當(dāng)使用對象風(fēng)格的提交方式,整個對象都作為載荷傳給 mutation 函數(shù),因此 handler 保持不變:
mutations: { increment (state, payload) { state.count += payload.amount } }
使用常量替代 mutation 事件類型在各種 Flux 實(shí)現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用,同時把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然:
// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION'
// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({ state: { ... }, mutations: { // 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個常量作為函數(shù)名 [SOME_MUTATION] (state) { // mutate state } } })
用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中,這會很有幫助。但如果你不喜歡,你完全可以不這樣做。
一條重要的原則就是要記住 mutation 必須是同步函數(shù)。為什么?請參考下面的例子:
mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } }
現(xiàn)在想象,我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄,devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而,在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成:因?yàn)楫?dāng) mutation 觸發(fā)的時候,回調(diào)函數(shù)還沒有被調(diào)用,devtools 不知道什么時候回調(diào)函數(shù)實(shí)際上被調(diào)用——實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。
你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用(需要在根節(jié)點(diǎn)注入 store)。
import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')` // `mapMutations` 也支持載荷: 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')` }) } }
感謝各位的閱讀,以上就是“vuex怎么在非組件中調(diào)用mutations方法”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vuex怎么在非組件中調(diào)用mutations方法這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。