详细分析Vuex中的mapGetters

1. 基本知识

优势和用途

简化代码：用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
更易读：组件中直接使用映射的计算属性，使得代码更加清晰易懂，组件的状态管理部分与视图逻辑分离
组件复用：计算属性的定义是在组件中，因此可以轻松地将组件复用到不同的场景中，而不必担心状态和 getter 的映射工作

mapGetters 是 Vuex 提供的辅助函数，用于将 store 中的 getters 映射到组件的计算属性中。它接收一个数组或对象作为参数，返回一个对象，对象的键是映射到组件中的计算属性名，值是相应的 getter 函数名或者对象

数组：

import { mapGetters } from 'vuex'export default {computed: {...mapGetters(['getterName1','getterName2'])}
}

对象：

import { mapGetters } from 'vuex'export default {computed: {...mapGetters({aliasName1: 'getterName1',aliasName2: 'getterName2'})}
}

mapState 也是 Vuex 提供的辅助函数，同理

import { mapState } from 'vuex'export default {computed: {...mapState(['stateName1','stateName2'])}
}

以及

import { mapState } from 'vuex'export default {computed: {...mapState({aliasName1: state => state.moduleName.stateName1,aliasName2: 'stateName2'})}
}

2. Demo1

整体的基本知识可能过于抽象

通过实战的整体逻辑，可能会有感触

mapState 和 mapGetters 是 Vuex 提供的辅助函数，用于在 Vue 组件中映射 Vuex 中的状态和 getter 到组件的计算属性中

在 Vuex 中定义了一些状态（state）、getter 和 mutations，这些定义分别放在了 common.js、getters.js 和 logs.js 等文件中
在 index.js 中创建了 Vuex 的 Store，将这些模块注册到了 Store 中，并导出了这个 Store
有一个 Vue 组件，需要用到 common 模块中的状态和 getters.js 中的 getter

第三步骤的代码如下：

在index中引入，创建了 Vuex 的 Store

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import common from './modules/common'
import tags from './modules/tags'
import logs from './modules/logs'
import dict from './modules/dict'
import getters from './getters'Vue.use(Vuex)
const store = new Vuex.Store({modules: {user,common,logs,tags,dict},getters,
})export default store

截图如下：
在这里插入图片描述
在getters文件中引入需要导出的变量

const getters = {logsList: state => state.logs.logsList,logsLen: state => state.logs.logsList.length || 0,
}
export default getters

对应的logs.js文件引入相关内容：

import {setStore, getStore} from '@/util/store'
import {dateFormat} from '@/util/date'
import {sendLogs} from '@/api/user'const logs = {state: {logsList: getStore({name: 'logsList'}) || [],},actions: {SendLogs({state, commit}) {return new Promise((resolve, reject) => {sendLogs(state.logsList).then(() => {commit('CLEAR_LOGS');resolve();}).catch(error => {reject(error)})})},},mutations: {ADD_LOGS: (state, {type, message, stack, info}) => {state.logsList.push(Object.assign({url: window.location.href,time: dateFormat(new Date())}, {type,message,stack,info: info.toString()}))setStore({name: 'logsList', content: state.logsList})},CLEAR_LOGS: (state) => {state.logsList = [];setStore({name: 'logsList', content: state.logsList})}}};export default logs;

如果后续需要使用到

具体如下：

computed: {...mapGetters(['logsList']),使用方法fun() {this.logsList
}

3. Demo2

对于上述的逻辑比较清晰了，再给出另外一个Demo

getters文件

const getters = {userInfo: state => state.user.userInfo,
}
export default getters

对应user.js文件中含有丰富的方法：

在这里插入图片描述

如果后续需要使用，具体Demo如下（假设template中有使用到userInfo的信息）：

<template slot="menuLeft"><el-button size="small"icon="el-icon-setting"@click="handleRole"v-if="userInfo.role_name.includes('admin')"plain>权限设置</el-button>
</template>

具体js如下：

computed: {...mapGetters(["userInfo", "permission"]),permissionList() {return {addBtn: this.vaildData(this.permission.role_add, false),viewBtn: this.vaildData(this.permission.role_view, false),delBtn: this.vaildData(this.permission.role_delete, false),editBtn: this.vaildData(this.permission.role_edit, false)};}
},