Vuex中已對應的完整指南

Vuex 是一把雙面刃。如果使用得當，使用 Vue 可以讓你的工作更輕鬆。如果不小心，它也會使你的程式碼混亂不堪。

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

在文中，我將示範如何對應 Vuex 儲存中的資料。如果你熟悉 Vuex 基礎，那麼這些內容將會幫你寫出更簡潔、更方便維護的程式碼。

本文假設你了解 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')`
    })
  }
}

總結

看到這裡，你應該能夠學到：

• 對Vuex 中的映射是如何工作的以及為什麼要使用它有了深刻的了解

• 能夠映射Vuex store 中的所有元件（state、 getter、 mutation、action）

• 知道何時應該要映射store

英文原文網址：https://blog.logrocket.com/a-complete-guide-to-mapping-in-vuex/

作者：Moses Anumadu

相關推薦：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

#更多程式相關知識，請造訪：程式設計入門！ ！

以上是Vuex中已對應的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！