程序員應(yīng)該知道的vuex冷門小技巧(超好用)
更新時(shí)間：2022年05月16日 09:30:20 作者：你睡醒了嗎
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門小技巧的相關(guān)資料,需要的朋友可以參考下
當(dāng)訪問(wèn)某個(gè)數(shù)據(jù)項(xiàng)嵌套太深了，優(yōu)化一下訪問(wèn)的方式
- 我相信每一個(gè)程序員都會(huì)使用vuex吧,首先我承認(rèn)vuex真的超好用,尤其是在項(xiàng)目特別大的時(shí)候,代碼會(huì)看起來(lái)非常的簡(jiǎn)潔,也方便維護(hù),但是項(xiàng)目大了,vuex的公共數(shù)據(jù)的嵌套也會(huì)越來(lái)越深,在組件中使用的時(shí)候就會(huì)像下面這張圖一樣,我要一直點(diǎn)啊點(diǎn),才能拿到最里面的數(shù)據(jù),項(xiàng)目大了點(diǎn)都要點(diǎn)老半天......
在我的不斷嘗試中,成功的發(fā)現(xiàn)了,vuex其實(shí)有一個(gè)輔助函數(shù)map可以解決這個(gè)問(wèn)題,下面就把我總結(jié)到的語(yǔ)法分享給大家啦~希望可以幫到你
- 輔助函數(shù)map作用：簡(jiǎn)化使用state, getters, mutatioins, actions
mapState的使用步驟
// 1. 導(dǎo)入輔助函數(shù)mapState，它是在vuex中定義的一個(gè)工具函數(shù)。
// es6 按需導(dǎo)入 import { mapState } from 'vuex'
import { mapState } from 'vuex'
computed: {
// 說(shuō)明1： ...對(duì)象 是把對(duì)象展開(kāi)，合并到computed
// 說(shuō)明2： mapState是一個(gè)函數(shù)
// ['數(shù)據(jù)項(xiàng)1'， '數(shù)據(jù)項(xiàng)2']
...mapState(['xxx'])，
...mapState({'新名字': 'xxx'})
}使用
script: this.xxx
模板: {{xxx}}圖示:
原理
- mapState是輔助函數(shù)，將vuex中的數(shù)據(jù)投射到組件內(nèi)部；
- computed:{ ...mapState() } 這里的...是對(duì)象的展開(kāi)運(yùn)算符，整體來(lái)看是對(duì)象的合并。
如果vuex中的數(shù)據(jù)與本組件內(nèi)的數(shù)據(jù)名相同,怎么辦呢?
輔助函數(shù)mapState對(duì)數(shù)據(jù)重命名
...mapState({'新名字': 'xxx'})
## Vuex-map函數(shù)用法匯總
使用全局state
- 直接使用： this.$store.state.xxx;
- map輔助函數(shù)：
computed: {
// 省略其他計(jì)算屬性
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}那如果是分模塊化呢?如何使用modules中的state?
圖示
- 直接使用：
this.$store.state.模塊名.xxx; - map輔助函數(shù)：
computed: {
...mapState('模塊名', ['xxx']),
...mapState('模塊名', {'新名字': 'xxx'})
}使用全局getters
- 直接使用：
this.$store.getters.xxx - map輔助函數(shù)：
computed: {
...mapGetters(['xxx']),
...mapGetters({'新名字': 'xxx'})
}使用modules中的getters
- 直接使用：
this.$store.getters.模塊名.xxx - map輔助函數(shù)：
computed: {
...mapGetters('模塊名', ['xxx']),
...mapGetters('模塊名',{'新名字': 'xxx'})
}使用全局mutations
- 直接使用：
this.$store.commit('mutation名', 參數(shù)) - map輔助函數(shù)：
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}使用modules中的mutations（namespaced:true）
- 直接使用：
this.$store.commit('模塊名/mutation名', 參數(shù)) - map輔助函數(shù)：
methods: {
...mapMutations('模塊名', ['xxx']),
...mapMutations('模塊名',{'新名字': 'xxx'})
}使用全局actions
- 直接使用：
this.$store.dispatch('action名', 參數(shù)) - map輔助函數(shù)：
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}使用modules中的actions（namespaced:true）
- 直接使用：
this.$store.dispatch('模塊名/action名', 參數(shù)) - map輔助函數(shù)：
methods: {
...mapActions('模塊名', ['xxx']),
...mapActions('模塊名',{'新名字': 'xxx'})
}
- 如果namespaced為true，則需要額外去補(bǔ)充模塊名
- 如果namespaced為false，則不需要額外補(bǔ)充模塊名
總結(jié)
到此這篇關(guān)于vuex冷門小技巧的文章就介紹到這了,更多相關(guān)vuex冷門小技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue批量注冊(cè)組件實(shí)現(xiàn)動(dòng)態(tài)組件技巧
Vue 動(dòng)態(tài)組件的應(yīng)用場(chǎng)景很多,可應(yīng)用于動(dòng)態(tài)頁(yè)簽,動(dòng)態(tài)路由等場(chǎng)景,其核心原理是批量注冊(cè),在Vue2和Vue3中實(shí)現(xiàn)原理相同,只是語(yǔ)法略有差異,本文給大家介紹了Vue批量注冊(cè)組件實(shí)現(xiàn)動(dòng)態(tài)組件技巧,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue中使用vuex的超詳細(xì)教程，給大家介紹vue項(xiàng)目怎么使用，非常適合初學(xué)者使用，保存數(shù)據(jù)以及獲取數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
vue-router 是 Vue.js 官方的路由庫(kù).這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02
這篇文章主要介紹了加速vue組件渲染之性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例，本來(lái)移動(dòng)端開(kāi)發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來(lái)使用2017-04-04
vue3鼠標(biāo)經(jīng)過(guò)顯示按鈕功能的實(shí)現(xiàn)
本篇文章介紹了如何使用 Vue3 實(shí)現(xiàn)一個(gè)鼠標(biāo)經(jīng)過(guò)顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來(lái)創(chuàng)建響應(yīng)式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來(lái)監(jiān)聽(tīng)鼠標(biāo)的移入和移出事件,感興趣的朋友一起看看吧2024-04-04
vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli2.x舊版本卸載不掉的問(wèn)題踩坑指南(附Vue腳手架安裝教程)
遇到一個(gè)Vuecli2腳手架卸載不了的問(wèn)題,查了許多資料說(shuō)的都比較復(fù)雜,所以下面這篇文章主要給大家介紹了關(guān)于vue-cli2.x舊版本卸載不掉的問(wèn)題踩坑的相關(guān)資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下2022-07-07
如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過(guò)大問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07