Vuex 映射指南

時間 2020-09-29

標籤 vuex 映射指南简体版

原文原文鏈接

做者：Moses Anumadu
翻譯：瘋狂的技術宅前端

原文：https://blog.logrocket.com/a-...vue

未經容許嚴禁轉載程序員

Vuex 是一把雙刃劍。若是使用得當，使用 Vue 可使你的工做更加輕鬆。若是不當心，它也會使你的代碼混亂不堪。面試

使用 Vuex 以前，你應該先了解四個主要概念：state、getter、mutation 和 action。一個簡單的 Vuex 狀態在 store 中的這些概念中操做數據。 Vuex 中的映射提供了一種從中檢索數據的好方法。vuex

在文中，我將演示如何映射 Vuex 存儲中的數據。若是你熟悉 Vuex 基礎，那麼這些內容將會幫你編寫更簡潔、更便於維護的代碼。segmentfault

本文假設你瞭解 Vue.js 和 Vuex 的基礎知識。數組

Vuex 中的映射是什麼？

Vuex 中的映射使你能夠將 state 中的任何一種屬性（state、getter、mutation 和 action）綁定到組件中的計算屬性，並直接使用 state 中的數據。服務器

下面是一個簡單的 Vuex store 例子，其中測試數據位於 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 組件中執行如下操做。多線程

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

上面的代碼能夠工做，可是隨着 state 數據量的開始增加，很快就會變得很難看。

例如：

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',
        ])
    }
}

如今你能夠訪問組件中的整個用戶對象。

你還能夠作更多的事，例如把對象從 state 添加到 mapState 方法。

import { mapGetters } from 'vuex';

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

如你所見，這要乾淨得多。能夠經過如下方式輕鬆訪問用戶名：

{{user.data.name}}

services 對象和映射的許多其餘的值也是如此。

你注意到咱們是如何將數組傳遞給 mapState() 的嗎？若是須要爲值指定其餘名稱，則能夠傳入一個對象。

import { mapGetters } from 'vuex';

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

如今能夠經過簡單地調用 userDetails 來引用 user。

什麼時候映射整個 state

根據經驗，僅當 state 中有大量數據，而且組件中所有須要它們時，才應該映射。

在上面的例子中，若是咱們只須要一個值（例如 username），則映射整個用戶對象就沒有多大意義。

在映射時，整個對象將會所有加載到內存中。實際上咱們並不想繼續把不須要的數據加載到內存中，由於這將是多餘的，而且從長遠來看會影響性能。

映射 getter

映射 getter 的語法與 mapState 函數類似。

import { mapGetters } from 'vuex'

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

與映射 state 相似，若是你打算使用其餘名稱，則能夠把對象傳遞給 mapGetters 函數。

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') 綁定到映射器數組中的名稱或對象的鍵。

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')`
    })
  }
}