當(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)老半天......

image.png

在我的不斷嘗試中,成功的發(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'})
}
復(fù)制代碼

 #### 使用

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

圖示:

image.png

原理

1. mapState是輔助函數(shù)，將vuex中的數(shù)據(jù)投射到組件內(nèi)部；
2. 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ù)用法匯總

image.png

使用全局state

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

computed: { 
  // 省略其他計(jì)算屬性
  ...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，則需要額外去補(bǔ)充模塊名
• 如果namespaced為false，則不需要額外補(bǔ)充模塊名

總結(jié)