當訪問某個數據項嵌套太深了，優化一下訪問的方式

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

image.png

在我的不斷嘗試中,成功的發現了,vuex其實有一個輔助函數map可以解決這個問題,下面就把我總結到的語法分享給大家啦~希望可以幫到你

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

### mapState的使用步驟

// 1. 導入輔助函數mapState，它是在vuex中定義的一個工具函數。
//  es6 按需導入 import { mapState } from 'vuex' 
import { mapState } from 'vuex'

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

 #### 使用

script:   this.xxx
模板:     {{xxx}}
復制代碼

圖示:

image.png

原理

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

如果vuex中的數據與本組件內的數據名相同,怎么辦呢?

輔助函數mapState對數據重命名

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

## Vuex-map函數用法匯總

image.png

使用全局state

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

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

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

圖示

image.png

• 直接使用：this.$store.state.模塊名.xxx;
• map輔助函數：

computed: { 
  ...mapState('模塊名', ['xxx']), 
  ...mapState('模塊名', {'新名字': 'xxx'})
}
復制代碼

使用全局getters

• 直接使用：this.$store.getters.xxx
• map輔助函數：

computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}
復制代碼

使用modules中的getters

• 直接使用：this.$store.getters.模塊名.xxx
• map輔助函數：

computed: { 
  ...mapGetters('模塊名', ['xxx']), 
  ...mapGetters('模塊名',{'新名字': 'xxx'})
}
復制代碼

使用全局mutations

• 直接使用：this.$store.commit('mutation名', 參數)
• map輔助函數：

methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}
復制代碼

使用modules中的mutations（namespaced:true）

• 直接使用：this.$store.commit('模塊名/mutation名', 參數)
• map輔助函數：

methods: { 
  ...mapMutations('模塊名', ['xxx']), 
  ...mapMutations('模塊名',{'新名字': 'xxx'})
}
復制代碼

使用全局actions

• 直接使用：this.$store.dispatch('action名', 參數)
• map輔助函數：

methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}
復制代碼

使用modules中的actions（namespaced:true）

• 直接使用：this.$store.dispatch('模塊名/action名', 參數)
• map輔助函數：

methods: { 
  ...mapActions('模塊名', ['xxx']), 
  ...mapActions('模塊名',{'新名字': 'xxx'})
}
復制代碼

• 如果namespaced為true，則需要額外去補充模塊名
• 如果namespaced為false，則不需要額外補充模塊名

總結