魔术字符串

指在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值

写成一个变量，这样就可以消除耦合，以后我们只要维护一处代码配置就可以了

还可以通过import方式将config作为全局配置项供所有模块消费

<template>
  <div>
    <el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">新增</el-button>
    <el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">编辑</el-button>
    <el-button v-if="roleId === rolesConfig.superManagerRole" @click="handleClick">删除</el-button>
  </div>
</template>

<script>
// 魔术字符串
const rolesConfig = {
  normalRole: 2,
  managerRole: 1,
  superManagerRole: 3
}
export default {
  data() {
    return {
      roleId: null,
      rolesConfig
    }
  },
  created() {
    this.roleId = localStorage.getItem('roleId')
    if (this.roleId === rolesConfig.normalRole) {
      this.getNormalList()
    }
    if (this.roleId === rolesConfig.superManagerRole) {
      this.getSuperManageList()
    }
    if (this.roleId === rolesConfig.managerRole) {
      this.getManageList()
    }
  },
  methods: {
    handleClick() {
      // 普通员工
      if (this.roleId === rolesConfig.normalRole) {
        return
      }
    },
    getManageList() {

    },
    getNormalList() {

    },
    getSuperManageList() {

    }
  }
}
</script>