作者：前端先鋒
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ
前言
Vuex 是一把雙刃劍。如果使用得當，Vue 可以使你的工作更加輕松。如果不小心，也會使讓的代碼混亂不堪。
在使用 Vuex 之前，應該先了解四個主要概念：state、getter、mutation 和 action。一個簡單的 Vuex 狀態(tài)在 store 中的這些概念中操作數(shù)據(jù)。Vuex 中的映射提供了一種從中檢索數(shù)據(jù)的好方法。
在文中，我將演示如何映射 Vuex 存儲中的數(shù)據(jù)。如果你熟悉 Vuex 基礎(chǔ)，那么這些內(nèi)容將會幫你編寫更簡潔、更便于維護的代碼。
本文假設(shè)你了解 Vue.js 和 Vuex 的基礎(chǔ)知識。
Vuex 中的映射是什么？
Vuex 中的映射使你可以將 state 中的任何一種屬性（state、getter、mutation 和 action）綁定到組件中的計算屬性，并直接使用 state 中的數(shù)據(jù)。
下面是一個簡單的 Vuex store 例子，其中測試數(shù)據(jù)位于 state 中。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({
state: {
data: "test data"
}})
如果要從 state 中訪問 data 的值，則可以在 Vue.js 組件中執(zhí)行以下操作。
computed: {
getData(){ return this.$store.state.data
} }
上面的代碼可以工作，但是隨著 state 數(shù)據(jù)量的開始增長，很快就會變得很難看。例如：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)const store = new Vuex.Store({
state: {
user: {
id:1,
age:23,
role:user
data:{ name:"user name",
address:"user address"
} }, services: {},
medical_requests: {},
Appointments: {},
} }})
要從處于 state 中的用戶對象獲取用戶名：
computed: {
getUserName(){ return this.$store.state.user.data.name
} }
這樣可以完成工作，但是還有更好的方法。
映射 state
要將 state 映射到 Vue.js 組件中的計算屬性，可以運行以下命令。
import { mapGetters } from 'vuex';
export default{
computed: { ...mapState([ 'user',
]) }}
現(xiàn)在你可以訪問組件中的整個用戶對象。
你還可以做更多的事，例如把對象從 state 添加到 mapState 方法。
import { mapGetters } from 'vuex';
export default{
computed: { ...mapState([ 'user',
'services'
]) }}
如你所見，這要干凈得多?？梢酝ㄟ^以下方式輕松訪問用戶名：
{{user.data.name}}
services 對象和映射的許多其他的值也是如此。
你注意到我們是如何將數(shù)組傳遞給 mapState() 的嗎？如果需要為值指定其他名稱，則可以傳入一個對象。
import { mapGetters } from 'vuex';
export default{
computed: { ...mapState({ userDetails:'user',
userServices:'services'
}) }}
現(xiàn)在可以通過簡單地調(diào)用 userDetails 來引用 user。
何時映射整個 state
根據(jù)經(jīng)驗，僅當 state 中有大量數(shù)據(jù)，并且組件中全部需要它們時，才應該映射。
在上面的例子中，如果我們只需要一個值（例如 username），則映射整個用戶對象就沒有多大意義。
在映射時，整個對象將會全部加載到內(nèi)存中。實際上我們并不想繼續(xù)把不需要的數(shù)據(jù)加載到內(nèi)存中，因為這將是多余的，并且從長遠來看會影響性能。
映射 getter
映射 getter 的語法與 mapState 函數(shù)相似。
import { mapGetters } from 'vuex'
export default {
computed: { ...mapGetters([ 'firstCount',
'anotherGetter',
]) }}
與映射 state 類似，如果你打算使用其他名稱，則可以把對象傳遞給 mapGetters 函數(shù)。
import { mapGetters } from 'vuex'
export default {
computed: { ...mapGetters([ first:'firstCount',
another:'anotherGetter',
]) }}
映射 mutation
映射 Mutation 時，可以采用以下語法來提交 Mutation。
this.$store.commit('mutationName`)
例如：
import { mapMutations } from 'vuex'
export default {
methods: { ...mapMutations([ 'search', // 映射 `this.increment()` 到 `this.$store.commit('search')`
// `mapMutations` 也支持 payloads:
'searchBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.commit('searchBy', amount)`
]), ...mapMutations({ find: 'search' // 映射 `this.add()` 到 `this.$store.commit('search')`
}) }}
映射 action
映射 action 與映射 mutation 非常相似，因為它也可以在方法中完成。使用映射器會把 this.$store.dispatch('actionName') 綁定到映射器數(shù)組中的名稱或?qū)ο蟮逆I。
import { mapActions } from 'vuex'
export default {
// ...
methods: { ...mapActions([ 'increment', // 映射 `this.increment()` 到 `this.$store.dispatch('increment')`
// `mapActions` 也支持 payloads:
'incrementBy' // 映射 `this.incrementBy(amount)` 到 `this.$store.dispatch('incrementBy', amount)`
]), ...mapActions({ add: 'increment' // 映射 `this.add()` 到 `this.$store.dispatch('increment')`
}) }}
總結(jié)
看到這里，你應該能夠?qū)W到：
- 對 Vuex 中的映射是如何工作的以及為什么要使用它有了深刻的了解
- 能夠映射 Vuex store 中的所有組件（state、 getter、 mutation、action）
- 知道什么時候應該映射 store
作者：前端先鋒
轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/1sl21P0AHPlbFEq4_Q7hVQ
