程序員都知道的 Vuex 的小技巧，超好用
當訪問某個數據項嵌套太深了，優化一下訪問的方式
- 我相信每一個程序員都會使用 vuex 吧, 首先我承認 vuex 真的超好用, 尤其是在項目特別大的時候, 代碼會看起來非常的簡潔, 也方便維護, 但是項目大了, vuex 的公共數據的嵌套也會越來越深, 在組件中使用的時候就會像下面這張圖一樣, 我要一直點啊點, 才能拿到最裏面的數據, 項目大了點都要點老半天......
在我的不斷嘗試中, 成功的發現了, vuex 其實有一個輔助函數 map 可以解決這個問題, 下面就把我總結到的語法分享給大家啦~ 希望可以幫到你
- 輔助函數 map 作用：簡化使用 state, getters, mutatioins, actions
-
mapState的使用步驟
// 1. 導入輔助函數mapState，它是在vuex中定義的一個工具函數。
// es6 按需導入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
computed: {
// 說明1：...對象 是把對象展開，合併到computed
// 說明2：mapState是一個函數
// ['數據項1'， '數據項2']
...mapState(['xxx'])，
...mapState({'新名字': 'xxx'})
}
複製代碼-
使用
script: this.xxx
模板: {{xxx}}
複製代碼圖示:
原理
-
mapState 是輔助函數，將 vuex 中的數據投射到組件內部；
-
computed:{...mapState() } 這裏的... 是對象的展開運算符，整體來看是對象的合併。
如果 vuex 中的數據與本組件內的數據名相同, 怎麼辦呢?
輔助函數 mapState 對數據重命名
...mapState({'新名字': 'xxx'})
## Vuex-map 函數用法彙總
使用全局 state
-
直接使用：this.$store.state.xxx;
-
map 輔助函數：
computed: {
// 省略其他計算屬性
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
複製代碼那如果是分模塊化呢? 如何使用 modules 中的 state?
圖示
-
直接使用：
this.$store.state.模塊名.xxx; -
map 輔助函數：
computed: {
...mapState('模塊名', ['xxx']),
...mapState('模塊名', {'新名字': 'xxx'})
}
複製代碼使用全局 getters
-
直接使用：
this.$store.getters.xxx -
map 輔助函數：
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}
複製代碼使用 modules 中的 getters
-
直接使用：
this.$store.getters.模塊名.xxx -
map 輔助函數：
computed: {
...mapGetters('模塊名', ['xxx']),
...mapGetters('模塊名',{'新名字': 'xxx'})
}
複製代碼使用全局 mutations
-
直接使用：
this.$store.commit('mutation名', 參數) -
map 輔助函數：
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
複製代碼使用 modules 中的 mutations（namespaced:true）
-
直接使用：
this.$store.commit('模塊名/mutation名', 參數) -
map 輔助函數：
methods: {
...mapMutations('模塊名', ['xxx']),
...mapMutations('模塊名',{'新名字': 'xxx'})
}
複製代碼使用全局 actions
-
直接使用：
this.$store.dispatch('action名', 參數) -
map 輔助函數：
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
複製代碼使用 modules 中的 actions（namespaced:true）
-
直接使用：
this.$store.dispatch('模塊名/action名', 參數) -
map 輔助函數：
methods: {
...mapActions('模塊名', ['xxx']),
...mapActions('模塊名',{'新名字': 'xxx'})
}
複製代碼
如果 namespaced 爲 true，則需要額外去補充模塊名
如果 namespaced 爲 false，則不需要額外補充模塊名
總結
關於本文
來自：你睡醒了嗎
https://juejin.cn/post/7097568476155838494
高級前端進階 網易 & 螞蟻前端，專注前端進階領域，已幫助無數前端跳槽漲薪。每日一題「Daily-Interview-Question」 Github 收穫近 25000 顆小星星，各公司面試官都在使用。接下來帶你走進高級前端的世界，在進階的路上，共勉！
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/0OtAXQaQKECFtnizQ9GakA