Vue.js中的State管理——使用mapGetters與Vuex

一、Vue.js中的State（狀態）管理

Vue.js是一種現代化的JavaScript框架，它允許我們輕鬆地構建動態Web應用程序，其中包含大量的互動式組件。在一個複雜的Web應用程序中，有許多組件需要在它們之間共享狀態。這是一個問題，因為組件僅強調組件局部狀態的概念，而不是應用程序整體的

狀態，這極大地增加了應用程序的混亂和不可讀性。Vue.js提供了一個名為Vuex的庫解決了這個問題。它是一個專門為Vue.js應用程序設計的狀態管理模式和庫，它允許我們輕鬆地管理Vue.js應用程序中的狀態。

二、Vuex與mapGetters

在Vue.js中使用Vuex的時候，我們需要一些額外的代碼來連接應用程序狀態到我們的Vue.js組件。這些連接代碼可以在 Vue.js 的計算屬性中耦合一些 Vue.js 代碼和 Vuex 代碼，從而使應用程序產生很多不必要的代碼。

為了避免這種情況，我們可以使用 Vuex 中的 mapGetters 工具。這將我們的 Vuex getters 映射到計算屬性中，不僅使計算屬性更具可讀性，而且減少了我們需要編寫的代碼量。

三、使用mapGetters的示例

讓我們通過一個簡單的示例看一下如何使用 Vuex 的 mapGetters 工具。我們首先定義一個名為「product」狀態的 Vuex 狀態模塊，如下所示：

const product = {
  state: {
     productCount: 10,
  },
  getters: {
     getProductCount: state => {
        return state.productCount;
     }
  }
} 

接下來，我們需要在我們的 Vue.js 組件中使用 mapGetters 工具。我們可以通過import引入，如下所示：

import { mapGetters } from 'vuex';
export default {
   computed: {
      ...mapGetters([
         'getProductCount'
      ])
   }
} 

一旦我們將Vuex getters 映射給了計算屬性。我們就可以在我們的組件中直接使用了，如下所示：

<template>
   <div>
      <p>Product Count: {{ getProductCount }}</p>
   </div>
</template> 

這裡，我們已經將Vuex getters映射到了我們的組件計算屬性中，我們只需要在組件模板中引用計算屬性即可。

四、使用命名空間的mapGetters示例

如果我們的 Vuex 狀態具有多個模塊並且它們被嵌套在不同的命名空間中，那麼在這種情況下，我們應該如何使用 mapGetters 工具呢？好消息是，我們仍然可以使用它，並且我們可以通過命名空間選項將它們與我們的組件關聯到一起。讓我們看一下下面的示例：

假設我們有兩個名為 cart 和 products 的 Vuex 模塊，並且我們正在使用命名空間 cart 來封裝我們的 cart 模塊狀態如下：

const cart = {
  namespaced: true,
  state: {
     cartCount: 10,
  },
  getters: {
     getCartCount: state => {
        return state.cartCount;
     }
  }
} 

我們可以在 Vuex 狀態中不使用命名空間映射 getters 集合，如下所示

const getters = {
   ...cart.getters,
   ...product.getters
} 

然後，在我們的 Vue.js 組件中使用 mapGetters 工具來引用 Vuex getters 集合，如下所示：

import { mapGetters } from 'vuex';
export default {
   computed: {
      ...mapGetters({
         cartCount: 'cart/getCartCount'
      })
   }
} 

現在我們可以在我們的組件模板中直接使用 cartCount：

<template>
   <div>
      <p>Cart Count: {{ cartCount }}</p>
   </div>
</template> 

五、總結

使用 mapGetters 工具非常簡單，通過它我們可以輕鬆地將 Vuex getters 映射到組件計算屬性中。尤其是當我們的應用程序中包含很多 Vuex getters 時，使用 mapGetters 工具可以使代碼更加清晰、可讀和易於維護。