详细分析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 到组件的计算属性中

1. 在 Vuex 中定义了一些状态（state）、getter 和 mutations，这些定义分别放在了 common.js、getters.js 和 logs.js 等文件中

2. 在 index.js 中创建了 Vuex 的 Store，将这些模块注册到了 Store 中，并导出了这个 Store

3. 有一个 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)
    };
  }
},