写一篇前端Vue怎么获取登录的用户名的博客

系列文章目录

文章目录

• 系列文章目录
• 前言
• 一、使用全局状态管理（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);
  

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

    
  
      
  Welcome, {{ username }}
  （图片来源网络，侵删）
    
  
  
  export default {
    computed: {
      username() {
        return this.$store.state.username;
      },
    },
  };
  
  

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

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

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

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

    
  
      
  Welcome, {{ username }}
    
  
  
  export default {
    data() {
      return {
        username: '',
      };
    },
    mounted() {
      this.username = localStorage.getItem('username');
    },
  };
  
  

  三、通过后端接口获取登录用户名

  在登录成功后，后端接口返回用户名的信息。

  在前端通过 API 调用后端接口来获取用户名。

  // 调用后端接口获取用户名
  axios.get('/api/user')
    .then(response => {
      this.username = response.data.username;
    })
    .catch(error => {
      console.error(error);
    });
  

  总结

  以上是几种常见的获取登录用户名的方法，你可以根据项目需求选择适合的方式。无论是使用全局状态管理、浏览器本地存储还是后端接口，都能满足你在 Vue 前端获取登录用户名的需求。

  

  （图片来源网络，侵删）

  希望本文能对你在 Vue 前端获取登录用户名方面有所帮助。如有任何疑问或意见，欢迎留言讨论。感谢阅读！

  需要系统源码或者BiShe加V

  ID:talon712