程序員都知道的 Vuex 的小技巧，超好用

當(dāng)訪問某個(gè)數(shù)據(jù)項(xiàng)嵌套太深了，優(yōu)化一下訪問的方式

• 我相信每一個(gè)程序員都會使用vuex吧,首先我承認(rèn)vuex真的超好用,尤其是在項(xiàng)目特別大的時(shí)候,代碼會看起來非常的簡潔,也方便維護(hù),但是項(xiàng)目大了,vuex的公共數(shù)據(jù)的嵌套也會越來越深,在組件中使用的時(shí)候就會像下面這張圖一樣,我要一直點(diǎn)啊點(diǎn),才能拿到最里面的數(shù)據(jù),項(xiàng)目大了點(diǎn)都要點(diǎn)老半天......

在我的不斷嘗試中,成功的發(fā)現(xiàn)了,vuex其實(shí)有一個(gè)輔助函數(shù)map可以解決這個(gè)問題,下面就把我總結(jié)到的語法分享給大家啦~希望可以幫到你

• 輔助函數(shù)map作用：簡化使用state, getters, mutatioins, actions

1. mapState的使用步驟

// 1. 導(dǎo)入輔助函數(shù)mapState，它是在vuex中定義的一個(gè)工具函數(shù)。
//  es6 按需導(dǎo)入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

computed: {
   // 說明1：...對象 是把對象展開，合并到computed
   // 說明2：mapState是一個(gè)函數(shù) 
   //  ['數(shù)據(jù)項(xiàng)1'， '數(shù)據(jù)項(xiàng)2']
   ...mapState(['xxx'])，
   ...mapState({'新名字': 'xxx'})
}
復(fù)制代碼

2. 使用

script:   this.xxx
模板:     {{xxx}}
復(fù)制代碼

圖示:

原理

1. mapState是輔助函數(shù)，將vuex中的數(shù)據(jù)投射到組件內(nèi)部；
2. computed:{ ...mapState() } 這里的...是對象的展開運(yùn)算符，整體來看是對象的合并。

如果vuex中的數(shù)據(jù)與本組件內(nèi)的數(shù)據(jù)名相同,怎么辦呢?

輔助函數(shù)mapState對數(shù)據(jù)重命名

...mapState({'新名字': 'xxx'})

## Vuex-map函數(shù)用法匯總

使用全局state

• 直接使用：this.$store.state.xxx;
• map輔助函數(shù)：

computed: { 
  // 省略其他計(jì)算屬性
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}
復(fù)制代碼

那如果是分模塊化呢?如何使用modules中的state?

圖示

• 直接使用： 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，則需要額外去補(bǔ)充模塊名
• 如果namespaced為false，則不需要額外補(bǔ)充模塊名

總結(jié)

來自：你睡醒了嗎

https://juejin.cn/post/7097568476155838494

祝 您:2022 年暴富！萬事如意！

點(diǎn)贊和在看就是最大的支持,比心??