建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)訪問某個數(shù)據(jù)項嵌套太深了，優(yōu)化一下訪問的方式
我相信每一個程序員都會使用vuex吧,首先我承認vuex真的超好用,尤其是在項目特別大的時候,代碼會看起來非常的簡潔,也方便維護,但是項目大了,vuex的公共數(shù)據(jù)的嵌套也會越來越深,在組件中使用的時候就會像下面這張圖一樣,我要一直點啊點,才能拿到最里面的數(shù)據(jù),項目大了點都要點老半天......
創(chuàng)新互聯(lián)公司服務(wù)項目包括磁縣網(wǎng)站建設(shè)、磁縣網(wǎng)站制作、磁縣網(wǎng)頁制作以及磁縣網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，磁縣網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到磁縣省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
image.png
在我的不斷嘗試中,成功的發(fā)現(xiàn)了,vuex其實有一個輔助函數(shù)map可以解決這個問題,下面就把我總結(jié)到的語法分享給大家啦~希望可以幫到你
- 輔助函數(shù)map作用：簡化使用state, getters, mutatioins, actions
### mapState的使用步驟
// 1. 導(dǎo)入輔助函數(shù)mapState，它是在vuex中定義的一個工具函數(shù)。
// es6 按需導(dǎo)入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
computed: {
// 說明1：...對象 是把對象展開，合并到computed
// 說明2：mapState是一個函數(shù)
// ['數(shù)據(jù)項1'， '數(shù)據(jù)項2']
...mapState(['xxx'])，
...mapState({'新名字': 'xxx'})
}
復(fù)制代碼
#### 使用
script: this.xxx
模板: {{xxx}}
復(fù)制代碼
圖示:
image.png
原理
- mapState是輔助函數(shù)，將vuex中的數(shù)據(jù)投射到組件內(nèi)部；
- computed:{ ...mapState() } 這里的...是對象的展開運算符，整體來看是對象的合并。
如果vuex中的數(shù)據(jù)與本組件內(nèi)的數(shù)據(jù)名相同,怎么辦呢?
輔助函數(shù)mapState對數(shù)據(jù)重命名
...mapState({'新名字': 'xxx'})## Vuex-map函數(shù)用法匯總
image.png
使用全局state
- 直接使用：this.$store.state.xxx;
- map輔助函數(shù)：
computed: {
// 省略其他計算屬性
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
復(fù)制代碼那如果是分模塊化呢?如何使用modules中的state?
圖示
image.png
- 直接使用：this.$store.state.模塊名.xxx;
- map輔助函數(shù)：
computed: {
...mapState('模塊名', ['xxx']),
...mapState('模塊名', {'新名字': 'xxx'})
}
復(fù)制代碼使用全局getters
- 直接使用：this.$store.getters.xxx
- map輔助函數(shù)：
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}
復(fù)制代碼使用modules中的getters
- 直接使用：this.$store.getters.模塊名.xxx
- map輔助函數(shù)：
computed: {
...mapGetters('模塊名', ['xxx']),
...mapGetters('模塊名',{'新名字': 'xxx'})
}
復(fù)制代碼使用全局mutations
- 直接使用：this.$store.commit('mutation名', 參數(shù))
- map輔助函數(shù)：
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
復(fù)制代碼使用modules中的mutations（namespaced:true）
- 直接使用：this.$store.commit('模塊名/mutation名', 參數(shù))
- map輔助函數(shù)：
methods: {
...mapMutations('模塊名', ['xxx']),
...mapMutations('模塊名',{'新名字': 'xxx'})
}
復(fù)制代碼使用全局actions
- 直接使用：this.$store.dispatch('action名', 參數(shù))
- map輔助函數(shù)：
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
復(fù)制代碼使用modules中的actions（namespaced:true）
- 直接使用：this.$store.dispatch('模塊名/action名', 參數(shù))
- map輔助函數(shù)：
methods: {
...mapActions('模塊名', ['xxx']),
...mapActions('模塊名',{'新名字': 'xxx'})
}
復(fù)制代碼- 如果namespaced為true，則需要額外去補充模塊名
- 如果namespaced為false，則不需要額外補充模塊名
總結(jié)
文章名稱：程序員都知道的vuex的冷門小技巧,超好用
分享地址：http://www.dlmjj.cn/article/djcdopd.html
