在Vue.js中,mutation被稱為一個用于管理狀態(tài)的重要組成部分。簡單來說,mutation就是一個用于修改state的函數(shù),并且每個mutation都有一個對應(yīng)的字符串類型的名稱,以便我們可以輕松地追蹤它們。
mutation可以通過commit方法來調(diào)用,它會在mutation被執(zhí)行時同步修改Vue組件的狀態(tài)。請注意,因為mutation是同步的,所以不能在mutation中進行異步操作。
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) store.commit('increment')
在上面的代碼示例中,我們定義了一個名為increment的mutation函數(shù)。當(dāng)使用commit方法調(diào)用increment時,我們可以看到state中的count屬性會被增加,并且任何依賴該屬性的組件都會自動進行更新。
mutation除了執(zhí)行狀態(tài)更改外,還允許我們自由地記錄狀態(tài)的變化。請注意,mutation必須是同步的,因此我們不應(yīng)該在mutation中進行異步操作。
const store = new Vuex.Store({ state: { messages: [] }, mutations: { addMessage(state, message) { state.messages.push(message) } }, actions: { fetchMessage({ commit }, messageId) { // 使用API異步獲取數(shù)據(jù) axios.get(`/api/messages/${messageId}`) .then(response =>{ commit('addMessage', response.data) }) } } })
在上面的代碼示例中,我們使用addMessage mutation函數(shù)向messages數(shù)組中添加一條消息。這個mutation可以在我們通過異步調(diào)用API成功獲取到一條新的消息后被調(diào)用。
總的來說,mutation是從視圖中修改應(yīng)用程序全局狀態(tài)的合適方式。將狀態(tài)修改公開在mutaion中可以使代碼更加可維護,并且它們可以更好地支持Vue.js面向組件的開發(fā)模式。