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 工具可以使代码更加清晰、可读和易于维护。