Vuex中映射的示例分析

小編給大家分享一下Vuex中映射的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Vuex 是一把雙刃劍。如果使用得當(dāng)，使用 Vue 可以使你的工作更加輕松。如果不小心，它也會(huì)使你的代碼混亂不堪。

使用 Vuex 之前，你應(yīng)該先了解四個(gè)主要概念：state、getter、mutation 和 action。一個(gè)簡(jiǎn)單的 Vuex 狀態(tài)在 store 中的這些概念中操作數(shù)據(jù)。 Vuex 中的映射提供了一種從中檢索數(shù)據(jù)的好方法。

在文中，我將演示如何映射 Vuex 存儲(chǔ)中的數(shù)據(jù)。如果你熟悉 Vuex 基礎(chǔ)，那么這些內(nèi)容將會(huì)幫你編寫(xiě)更簡(jiǎn)潔、更便于維護(hù)的代碼。

本文假設(shè)你了解 Vue.js 和 Vuex 的基礎(chǔ)知識(shí)。

Vuex 中的映射是什么？

Vuex 中的映射使你可以將 state 中的任何一種屬性（state、getter、mutation 和 action）綁定到組件中的計(jì)算屬性，并直接使用 state 中的數(shù)據(jù)。

下面是一個(gè)簡(jiǎn)單的 Vuex store 例子，其中測(cè)試數(shù)據(jù)位于 state 中。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
})

如果要從 state 中訪問(wèn) data 的值，則可以在 Vue.js 組件中執(zhí)行以下操作。

computed: {
        getData(){
          return this.$store.state.data
        }
    }

上面的代碼可以工作，但是隨著 state 數(shù)據(jù)量的開(kāi)始增長(zhǎng)，很快就會(huì)變得很難看。

例如：

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 中的用戶(hù)對(duì)象獲取用戶(hù)名：

computed: {
        getUserName(){
          return this.$store.state.user.data.name
        }
    }

這樣可以完成工作，但是還有更好的方法。

映射 state

要將 state 映射到 Vue.js 組件中的計(jì)算屬性，可以運(yùn)行以下命令。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

現(xiàn)在你可以訪問(wèn)組件中的整個(gè)用戶(hù)對(duì)象。

你還可以做更多的事，例如把對(duì)象從 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

如你所見(jiàn)，這要干凈得多?？梢酝ㄟ^(guò)以下方式輕松訪問(wèn)用戶(hù)名：

{{user.data.name}}

services 對(duì)象和映射的許多其他的值也是如此。

你注意到我們是如何將數(shù)組傳遞給 mapState() 的嗎？如果需要為值指定其他名稱(chēng)，則可以傳入一個(gè)對(duì)象。

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState({
            userDetails:'user',
            userServices:'services'
        })
    }
}

現(xiàn)在可以通過(guò)簡(jiǎn)單地調(diào)用 userDetails 來(lái)引用 user。

何時(shí)映射整個(gè) state

根據(jù)經(jīng)驗(yàn)，僅當(dāng) state 中有大量數(shù)據(jù)，并且組件中全部需要它們時(shí)，才應(yīng)該映射。

在上面的例子中，如果我們只需要一個(gè)值（例如 username），則映射整個(gè)用戶(hù)對(duì)象就沒(méi)有多大意義。

在映射時(shí)，整個(gè)對(duì)象將會(huì)全部加載到內(nèi)存中。實(shí)際上我們并不想繼續(xù)把不需要的數(shù)據(jù)加載到內(nèi)存中，因?yàn)檫@將是多余的，并且從長(zhǎng)遠(yuǎn)來(lái)看會(huì)影響性能。

映射 getter

映射 getter 的語(yǔ)法與 mapState 函數(shù)相似。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

與映射 state 類(lèi)似，如果你打算使用其他名稱(chēng)，則可以把對(duì)象傳遞給 mapGetters 函數(shù)。

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

映射 mutation

映射 Mutation 時(shí)，可以在用以下語(yǔ)法來(lái)提交 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 非常相似，因?yàn)樗部梢栽诜椒ㄖ型瓿?。使用映射器?huì)把 this.$store.dispatch('actionName') 綁定到映射器數(shù)組中的名稱(chēng)或?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')`
    })
  }
}

以上是“Vuex中映射的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！