手把手教你使用Vuex(三)

2022-03-31 07:08:19 字數 1571 閱讀 3201

2.mutation屬性

了解:

mutation是更改vuex的store中的狀態的唯一方法。非常類似於事件,官網說的「每個mutation都有乙個字串的事件型別和乙個**函式」,這個型別其實就是函式名,**函式就相當於函式體。

使用:

mutation也會接收state作為第一引數

呼叫時不能像之前那麼直接呼叫了,「要喚醒乙個mutation handler,你需要以相應的type呼叫store.commit方法」

可以看到我寫有乙個type引數,這個傳進去的額外引數,叫做mutation的載荷(payload),大多數情況下,載荷應該是乙個物件,這樣可以包含多個字段並且記錄的mutation會更易讀:

物件風格提交方式:

為了避免混淆,我把引數改成了typecl,commit物件中type屬性後填函式名字,mutation函式中的**不變

注意事項:

1️⃣最好提前在你的store中初始化好所有所需屬性

2️⃣  當需要在物件上新增新屬性時,應該:

state.obj =
3️⃣  不強制的使用常量代替mutation事件型別,看團隊和個人習慣

新建乙個mutation-type.js放mutation名字常量

在mutation.js中引入mutation-type.js

4️⃣mutation在使用的時候必須是同步函式,如果你想改變count的值,通過mutation中兩個包含非同步**都改變了這個狀態,那你怎麼知道什麼時候**,怎麼知道哪個先**呢?所以mutation必須是同步函式。非同步函式請看action。

vuex系列:

手把手教你使用vuex(一)

手把手教你使用vuex(二)

手把手教你使用vuex(三)

手把手教你使用vuex(四)

深入vuex戳這裡

手把手教你學vue 4(vuex)

管理統一元件狀態state。每個應用將僅僅包含乙個 store 例項。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段,在除錯的過程中也能輕易地取得整個當前應用狀態的快照。vuex 通過 store 選項,提供了一種機制將狀態從根元件 注入 到每乙個子元件中 需呼叫 vue.use vuex 把 s...

手把手教你寫ORM(三)

昨天處於暈死狀態,少寫了乙個元件,還需要乙個元件用來專門管理cache的,這裡說道為什麼要分這麼多元件,其實這是習慣問題,很多人喜歡寫乙個很大的dll,不過我比較喜歡拆分,小粒度的專案比較好管理和單獨測試,把用單元測試驗證好了的小組件湊起來除錯和寫成乙個巨大的dll慢慢一行行的追蹤 肯定是前者更加舒...

教程 手把手教你使用Git

前言 公司從17年漸漸從svn 轉向git 版本控制系統,以下是平時使用過程中的總結。一,git 是什麼?git 是目前世界上最先進的的分布式版本控制系統。二,svn 和git 的最主要的區別 svn是集中式版本控制系統,版本庫是集中放在 伺服器的,而幹活的時候,用的都是自己的電腦,所以首先要從 伺...