學妹手機里的美照

前言

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

進入正文…

---

一、mapGetters 方法

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

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

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

我們能想到的，前輩們都已經考慮到了。所以就有了mapGetter輔助函數。

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

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

實現效果都是一樣的。

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

二、mapState方法

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

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

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

自動生成方法，和上面的那個mapGetter 是一樣的

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

即使是多個也會非常方便，自動生成是真的香（😁）

三、mapActions方法

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

之前的寫法

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

在按鈕調用處是如下方式調用的

<button @click="increment">點擊自加</button>

自動生成的寫法

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

四、mapMutations方法

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

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

五、模塊化+命名空間

目的：讓代碼更好維護，讓多種數據分類更加明確。

原因：項目應用中存在多個模塊，多個模塊下又分為多個組件，我們將store分模塊，管理數據起來更加的方便，也更易進行數據的維護和擴展。

修改store.js

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

開啟命名空間后，組件中讀取state數據：

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

開啟命名空間后，組件中讀取getters數據：

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

開啟命名空間后，組件中調用dispatch

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

開啟命名空間后，組件中調用commit

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

六、項目結構

vuex并沒有強制大家使用什么樣的結構，更多的是一種規則、習慣、建議。

大部分時候Vuex會遵守以下幾個規則：

應用層級的狀態應該集中到單個 store 對象中。

提交 mutation 是更改狀態的唯一方法，并且這個過程是同步的。

異步邏輯都應該封裝到 action 里面。

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

對于大型應用，vuex建議大致如下的項目結構。（我們在平時開發時也應該要有這種分模塊的思想，無論在前端還是后端都應如此，因為這會讓接手你項目的人更為輕松）

├── index.html ├── main.js ├── api │ └── ... # 抽取出API請求 ├── components │ ├── App.vue │ └── ... └── store├── index.js # 我們組裝模塊并導出 store 的地方├── actions.js # 根級別的 action├── mutations.js # 根級別的 mutation└── modules├── cart.js # 購物車模塊└── products.js # 產品模塊

后語

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

紙上得來終覺淺，絕知此事要躬行。

大家好，我是博主寧在春：主頁

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

希望：我們，待別日相見時，都已有所成。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。