Vue3使用Vuex之mapState与mapGetters详解

当使用Vue3构建大型Web应用时，状态管理是很重要的一点。Vuex是一个非常流行的Vue.js状态管理库。而在Vue3中，使用Vuex也是非常方便的。其中，使用mapState和mapGetters是非常常见的两种方式。下面，我们详细讲解一下这两种方式的使用方法。

mapState

mapState是Vuex提供的辅助函数，可以将store中的state映射到局部计算属性中。在使用mapState之前，需要在Vue组件上关联Vuex，这样才能访问store的状态。假设我们有一个user模块，其定义如下：

const moduleUser = {
  state: {
    name: '张三',
    age: 18,
    sex: '男'
  },
  getters: {
    userInfo(state) {
      return `${state.name}，${state.age}岁，${state.sex}`;
    }
  },
  mutations: {
    changeName(state, name) {
      state.name = name;
    }
  }
}

那么我们要在Vue组件中使用该模块的状态，可以使用以下方法：

首先在组件中引入mapState：

import { mapState } from 'vuex'

然后在组件计算属性中使用该方法：

computed: {
  ...mapState({
    name: state => state.moduleUser.name,
    age: state => state.moduleUser.age,
    sex: state => state.moduleUser.sex
  })
}

这样我们就可以在组件中通过this.name、this.age、this.sex访问到对应的state中的值了。如果需要访问到多个模块中的状态，可以使用命名空间：

computed: {
  ...mapState('moduleUser', {
    name: state => state.name,
    age: state => state.age,
    sex: state => state.sex
  }),
  ...mapState('moduleArticle', {
    title: state => state.title,
    content: state => state.content
  })
}

这里我们使用了两个模块中的状态，分别是moduleUser和moduleArticle。

mapGetters

mapGetters与mapState类似，不同的是它映射的是store中的getters到局部计算属性中。先看一个例子：

const moduleArticle = {
  state: {
    title: '文章标题',
    content: '文章内容'
  },
  getters: {
    articleInfo(state) {
      return `标题：${state.title}，内容：${state.content}`;
    }
  },
  mutations: {
    changeContent(state, content) {
      state.content = content;
    }
  }
}

首先在组件中引入mapGetters：

import { mapGetters } from 'vuex'

然后在组件计算属性中使用该方法：

computed: {
  ...mapGetters('moduleArticle', [
    'articleInfo'
  ])
}

这样我们就可以在组件中通过this.articleInfo访问到对应的getters中的值了。

从两个示例中可以看到，使用mapState和mapGetters非常方便，能够帮助我们快速访问到store中的状态和getters。使用起来也非常简单，只需要引入辅助函数，然后在计算属性中使用即可。