写一篇前端Vue怎么获取登录的用户名的博客_vue获取登录用户信息 全局使用

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前言
• 一、使用全局状态管理（Vuex）获取登录用户名
• 二、使用浏览器本地存储（localStorage）获取登录用户名
• 三、通过后端接口获取登录用户名
• 总结

---

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。

在前端开发中，获取登录用户的用户名是一项常见的需求。Vue 是一种流行的前端框架，提供了多种方法来获取登录用户名。本文将详细介绍 Vue 前端获取登录用户名的几种方法，帮助你在实际项目中轻松应用。

---

一、使用全局状态管理（Vuex）获取登录用户名

创建 Vuex store，并在其中定义一个用于存储用户名的状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    username: '', // 存储登录用户名的状态
  },
  mutations: {
    setUsername(state, username) {
      state.username = username;
    },
  },
});

在登录成功后，将用户名保存到 Vuex store 中。

// 登录成功后的处理
this.$store.commit('setUsername', username);

在需要获取登录用户名的组件中，使用计算属性来获取用户名。

<template>
  <div>
    <p>Welcome, {{ username }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    username() {
      return this.$store.state.username;
    },
  },
};
</script>

二、使用浏览器本地存储（localStorage）获取登录用户名

1.在登录成功后，将用户名保存到 localStorage 中。

// 登录成功后的处理
localStorage.setItem('username', username);

在需要获取登录用户名的组件中，通过读取 localStorage 来获取用户名。

<template>
  <div>
    <p>Welcome, {{ username }}</p>
  </div>
</template>


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。