【Vue3】退出功能 [Dripdown下拉菜单、ElMessageBox确认框]

1. 注册点击事件

下拉菜单

指令事件

函数 handleCommand 形参中是可以拿到命名名字的

<el-dropdown placement="bottom-end" @command="handleCommand">

<el-dropdown-menu>
  <!-- 注意前三个加上的command跟我们的路由对应起来 -->
  <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
  <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
  <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
  <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
</el-dropdown-menu>

2. 添加退出功能

如果报错，需要在.eslintrc.cjs中配置globals

ElMessage：

1. 直接传入一个方法，里面传入消息
2. 里面传入一个对象，对象里面填入消息，加一个type类型
3. 还有一种更简单的形式：el跟上所要进行的方法名

const handleCommand = async (key) => {
  if (key === 'logout') {
    // 退出操作，注意一定要写await，等它执行完才去执行下面的代码
    await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })

    // 清除本地的数据 (token + user信息)
    userStore.removeToken()
    userStore.setUser({})
    router.push('/login')
  } else {
    // 跳转操作
    router.push(`/user/${key}`)
  }
}

3. pinia user.js 模块 提供 setUser 方法

const setUser = (obj) => (user.value = obj)