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

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

在我的不斷嘗試中,成功的發(fā)現(xiàn)了,vuex其實(shí)有一個輔助函數(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ù)項(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() } 這里的...是對象的展開運(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: { 
  // 省略其他計算屬性
  ...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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論