vuex中store 的mutation

1.mutation

官方解釋mutation：

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類(lèi)似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類(lèi)型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)

官方是建議我們通過(guò)mutation來(lái)實(shí)現(xiàn)更改store中的state的數(shù)據(jù)，而非在組件中直接使用$store.state.data=xxx來(lái)直接進(jìn)行更改。通過(guò)mutation來(lái)更改數(shù)據(jù)的操作會(huì)被捕獲到，而直接使用$store.state.data=xxx這種方式更的數(shù)據(jù)是無(wú)法被捕獲的，如果發(fā)生錯(cuò)誤，將無(wú)法定位到是哪個(gè)組件的操作導(dǎo)致錯(cuò)誤發(fā)生，所以官方說(shuō)更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

圖示：

上網(wǎng)找到 一個(gè)很不錯(cuò)的圖

流程：

• 繞過(guò)Actions（mutation必須是同步操作，Devtools才能追蹤變量）

用戶(hù)觸發(fā)事件

在事件處理中通過(guò)commit()提交對(duì)應(yīng)的mutation

mutation中對(duì)state進(jìn)行修改

state修改后響應(yīng)系統(tǒng)更新視圖

• 不繞過(guò)Actions（Action 可以包含任意異步操作）

用戶(hù)觸發(fā)事件

在事件處理中通過(guò)dispatch()提交對(duì)應(yīng)的Actions

在Actions中通過(guò)commit()提交對(duì)應(yīng)的mutation

mutation中對(duì)state進(jìn)行修改

state修改后響應(yīng)系統(tǒng)更新視圖

解析：

當(dāng)我們只有同步操作的時(shí)候，官方允許我們?cè)诮M件中直接提交mutation，而不經(jīng)過(guò)Actions，但是如果我們的操作包含異步操作的時(shí)候，我們必須通過(guò)Actions來(lái)異步提交mutation，從而實(shí)現(xiàn)異步操作，這樣才能讓Devtools可以捕獲變量更改。

2.初次使用

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 變更狀態(tài)state.count++},incrementNum (state,num) {// 通過(guò)提交載荷傳遞過(guò)來(lái)的numstate.count+=num}} })//在組件中定義一個(gè)方法通過(guò)$store.commit('increment')來(lái)進(jìn)行提交 methods:{increment(){this.$store.commit('increment')},incrementNum(num){this.$store.commit('increment',num)} }

3.提交載荷

mutations接受commit傳遞過(guò)來(lái)的參數(shù)，這個(gè)參數(shù)叫做payload（提交載荷），我們可以通過(guò)payload來(lái)實(shí)現(xiàn)數(shù)據(jù)的傳遞。

mutations: {increment (state, payload) {state.count += payload.amount} }store.commit('increment', {amount: 10 })

4.對(duì)象風(fēng)格的提交方式

store.commit()提供了另一種提交風(fēng)格，store.commit()允許以對(duì)象的風(fēng)格進(jìn)行提交，這個(gè)風(fēng)格跟vue很切合，對(duì)象聲明形式。

store.commit({type: 'increment', //對(duì)應(yīng)commit第一個(gè)參數(shù)，也就是事件類(lèi)型amount: 10 //傳遞的參數(shù)payload })

使用

mutations: {increment (state, payload) { //對(duì)象提交方式，payload是提交載荷state.count += payload.amount} }

5.Mutation 需遵守 Vue 的響應(yīng)規(guī)則

Vuex 的 store 中的狀態(tài)是響應(yīng)式的，所以Vuex 中的 mutation 也需要與使用 Vue 一樣遵守一些注意事項(xiàng)。

添加操作

//錯(cuò)誤的示范 state.info['address']='北京'//正確的示范 Vue.set(state.info,'address','北京') //vue官方說(shuō)以新對(duì)象替換老對(duì)象是遵守 Vue 的響應(yīng)規(guī)則 //響應(yīng)系統(tǒng)能捕獲全新的對(duì)象數(shù)據(jù) state.info = {//一個(gè)全新的對(duì)象}

第一個(gè)示范雖然是給state中的info添加了一個(gè)key value，但是這種添加操作是繞過(guò)了vue的響應(yīng)式系統(tǒng)的，所以vue并沒(méi)有將新添加的key value追加到響應(yīng)系統(tǒng)里面，所以視圖是不會(huì)動(dòng)態(tài)跟新新添加的數(shù)據(jù)。

而第二種示范，是通過(guò)vue的響應(yīng)式系統(tǒng)進(jìn)行變量的追加，所以vue能監(jiān)控到變量的變化，從而對(duì)視圖做出響應(yīng)和跟新。

刪除操作

刪除操作同理

Vue.delete(state.info,'address')

6.用常量替代Mutation事件類(lèi)型

從上面的代碼可以看出，我在使用store.commit的時(shí)候后面都是通過(guò)字符串的形式來(lái)指定commit的mutation。而官方建議是將這種mutation 事件類(lèi)型進(jìn)行一個(gè)抽離，將這些mutation的名字定義到一個(gè)專(zhuān)門(mén)保存的單獨(dú)文件種，這樣做抽離，使得整個(gè)APP的mutatio易于管理，也使得項(xiàng)目結(jié)構(gòu)清晰。

使用常量替代 mutation 事件類(lèi)型在各種 Flux 實(shí)現(xiàn)中是很常見(jiàn)的模式。這樣可以使 linter 之類(lèi)的工具發(fā)揮作用，同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對(duì)整個(gè) app 包含的 mutation 一目了然：

官方建議的操作如下：

先將創(chuàng)建一個(gè)mutation-types.js，里面存儲(chǔ)定義的mutation 事件類(lèi)型

// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' //定義什么mutation，先將事件類(lèi)型（名字）寫(xiě)這里

使用的時(shí)候

// store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types'const store = new Vuex.Store({state: { ... },mutations: {/*官方是用這種風(fēng)格來(lái)命名的：[SOME_MUTATION] (state) {} ---等價(jià)轉(zhuǎn)變--->SOME_MUTATION(state) {}*/// 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來(lái)使用一個(gè)常量作為函數(shù)名[SOME_MUTATION] (state) {// mutate state}} })//其他組件commit時(shí) import { SOME_MUTATION } from './mutation-types'... store.commit(SOME_MUTATION)

7.Mutation 必須是同步函數(shù)

官方是這樣解釋的：

一條重要的原則就是要記住 mutation 必須是同步函數(shù)。為什么？請(qǐng)參考下面的例子：

mutations: {someMutation (state) {api.callAsyncMethod(() => {state.count++})} }

現(xiàn)在想象，我們正在 debug 一個(gè) app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因?yàn)楫?dāng) mutation 觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，devtools 不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用——實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。

所以我們?yōu)榱四軌驅(qū)崿F(xiàn)異步操作，我們需要借助Actions來(lái)實(shí)現(xiàn)，在Actions通過(guò)異步提交 mutation從而實(shí)現(xiàn)異步操作，Action 可以包含任意異步操作，Action 提交的是 mutation，而不是直接變更狀態(tài)。

總結(jié)

以上是生活随笔為你收集整理的vuex中store 的mutation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。