學(xué)妹手機(jī)里的美照

前言

前一篇寫(xiě)了Vuex基本使用，用起來(lái)還稍稍有些繁瑣，代碼有很多
冗余的地方，這篇就帶著大家用更簡(jiǎn)單的方式來(lái)使用Vuex（其實(shí)就是怎么更好的偷懶，用更少的代碼來(lái)完之前的事情）

進(jìn)入正文…

---

一、mapGetters 方法

在我們之前要取出store中的getters，在組件中是需要$store.getters.bigSum 才能取到，為了方便會(huì)寫(xiě)成計(jì)算屬性

bigSum(){return this.$store.getters.bigSum }

一個(gè)兩個(gè)還能接受，但是如果有很多的，代碼會(huì)顯得十分冗余。不太合適，作為一名合格的程序員，偷懶是必備的哈。

我們能想到的，前輩們都已經(jīng)考慮到了。所以就有了mapGetter輔助函數(shù)。

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：

//第一步得先引入 import {mapGetters} from 'vuex'// 第二步 寫(xiě)在計(jì)算屬性中 computed:{// 之前的寫(xiě)法// bigSum(){// return this.$store.getters.bigSum// }//借助mapGetters生成計(jì)算屬性：bigSum（對(duì)象寫(xiě)法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成計(jì)算屬性：bigSum（數(shù)組寫(xiě)法）// ...mapGetters(['bigSum']), },

實(shí)現(xiàn)效果都是一樣的。

如果有多個(gè)值需要映射的話,...mapGetters({bigSum:'bigSum'},{xxxx:'xxxxx'}), 或者...mapGetters(['bigSum','xxxx'])都是可以的，極大的壓縮了代碼。

二、mapState方法

之前要從store 中取得 state 的話，有下面兩種方式

$store.state.sum 或者是下面這種計(jì)算屬性的方式，但是仍要我們自己寫(xiě)。

computed:{sum(){return this.$store.state.sum}},

自動(dòng)生成方法，和上面的那個(gè)mapGetter 是一樣的

// 引入的時(shí)候多引入一個(gè) mapState import {mapGetters,mapState} from 'vuex'// 計(jì)算屬性 computed:{// sum(){// return this.$store.state.sum// }//借助mapState生成計(jì)算屬性：sum（對(duì)象寫(xiě)法）...mapState({sum:"sum"}),//借助mapState生成計(jì)算屬性：sum（數(shù)組寫(xiě)法）...mapState(['sum']), },

即使是多個(gè)也會(huì)非常方便，自動(dòng)生成是真的香（😁）

三、mapActions方法

用于幫助我們生成與actions對(duì)話的方法，即：包含$store.dispatch(xxx)的函數(shù)

之前的寫(xiě)法

methods: {increment(){this.$store.dispatch("increment",1)} }

在按鈕調(diào)用處是如下方式調(diào)用的

<button @click="increment">點(diǎn)擊自加</button>

自動(dòng)生成的寫(xiě)法

methods:{//靠mapActions生成：increment（對(duì)象形式）...mapActions({increment:'increment'})//靠mapActions生成：increment（數(shù)組形式） // .mapActions(['increment'])// increment(){// this.$store.dispatch("increment",1)// }//使用方式 這個(gè)時(shí)候 組件內(nèi)定義的方法不能像之前一樣 重名了，得改一下zijia(){// 調(diào)用的時(shí)候 可以直接this 不用寫(xiě) $store.dispatch 這個(gè)了 后面跟參數(shù)即可 this.increment(1);}}

四、mapMutations方法

用于幫助我們生成與mutations對(duì)話的方法，即：包含$store.commit(xxx)的函數(shù)

methods:{//靠mapActions生成：increment、decrement（對(duì)象形式）...mapMutations({INCREMENT:'INCREMENT'}),//靠mapMutations生成：JIA、JIAN（對(duì)象形式）...mapMutations(['INCREMENT']),// 使用方式zijia(){// 之前的方式 this.$store.commit("INCREMENT",1)this.INCREMENT(1)} }

五、模塊化+命名空間

目的：讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類(lèi)更加明確。

原因：項(xiàng)目應(yīng)用中存在多個(gè)模塊，多個(gè)模塊下又分為多個(gè)組件，我們將store分模塊，管理數(shù)據(jù)起來(lái)更加的方便，也更易進(jìn)行數(shù)據(jù)的維護(hù)和擴(kuò)展。

修改store.js

const countAbout = {namespaced:true,//開(kāi)啟命名空間state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}} }const personAbout = {namespaced:true,//開(kāi)啟命名空間state:{ ... },mutations: { ... },actions: { ... } }const store = new Vuex.Store({modules: {countAbout,personAbout} })

開(kāi)啟命名空間后，組件中讀取state數(shù)據(jù)：

//方式一：自己直接讀取 this.$store.state.personAbout.list //方式二：借助mapState讀取： ...mapState('countAbout',['sum','school','subject']),

開(kāi)啟命名空間后，組件中讀取getters數(shù)據(jù)：

//方式一：自己直接讀取 this.$store.getters['personAbout/firstPersonName'] //方式二：借助mapGetters讀取： ...mapGetters('countAbout',['bigSum'])

開(kāi)啟命名空間后，組件中調(diào)用dispatch

//方式一：自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二：借助mapActions： ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

開(kāi)啟命名空間后，組件中調(diào)用commit

//方式一：自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二：借助mapMutations： ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

六、項(xiàng)目結(jié)構(gòu)

vuex并沒(méi)有強(qiáng)制大家使用什么樣的結(jié)構(gòu)，更多的是一種規(guī)則、習(xí)慣、建議。

大部分時(shí)候Vuex會(huì)遵守以下幾個(gè)規(guī)則：

應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對(duì)象中。

提交 mutation 是更改狀態(tài)的唯一方法，并且這個(gè)過(guò)程是同步的。

異步邏輯都應(yīng)該封裝到 action 里面。

另外就是，當(dāng)我們的項(xiàng)目變得十分龐大的時(shí)候，我們可以將action、mutation 和 getter 分割到單獨(dú)的文件。引入，最后直接導(dǎo)出 store即可，之后再在main.js中引入。

對(duì)于大型應(yīng)用，vuex建議大致如下的項(xiàng)目結(jié)構(gòu)。（我們?cè)谄綍r(shí)開(kāi)發(fā)時(shí)也應(yīng)該要有這種分模塊的思想，無(wú)論在前端還是后端都應(yīng)如此，因?yàn)檫@會(huì)讓接手你項(xiàng)目的人更為輕松）

├── index.html ├── main.js ├── api │ └── ... # 抽取出API請(qǐng)求 ├── components │ ├── App.vue │ └── ... └── store├── index.js # 我們組裝模塊并導(dǎo)出 store 的地方├── actions.js # 根級(jí)別的 action├── mutations.js # 根級(jí)別的 mutation└── modules├── cart.js # 購(gòu)物車(chē)模塊└── products.js # 產(chǎn)品模塊

后語(yǔ)

大家一起加油！！！如若文章中有不足之處，請(qǐng)大家及時(shí)指出，在此鄭重感謝。

紙上得來(lái)終覺(jué)淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁(yè)

一名喜歡文藝卻踏上編程這條道路的小青年。

希望：我們，待別日相見(jiàn)時(shí)，都已有所成。

總結(jié)

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vuex进阶操作，让你的代码更加高效（简称如何学会偷懒 【手动狗头】）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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