前端Vue怎么获取登录的用户名或用户id

在Vue应用中获取登录用户名或用户ID通常涉及到状态管理。以下是一个简单的例子，使用Vuex状态管理来存储用户信息：

1. 安装并设置Vuex：

npm install vuex --save

2. 创建一个Vuex store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    user: {
      id: null,
      name: null,
    },
  },
  mutations: {
    setUser(state, userData) {
      state.user.id = userData.id;
      state.user.name = userData.name;
    },
  },
  actions: {
    login({ commit }, userData) {
      commit('setUser', userData);
    },
  },
});

3. 在Vue组件中登录并设置用户信息：

// LoginComponent.vue
<template>
  <!-- 登录表单 -->
</template>
 
<script>
export default {
  methods: {
    async login() {
      try {
        // 假设这是一个登录API调用
        const response = await this.$http.post('/api/login', { username, password });
        // 登录成功后，提交用户信息到Vuex store
        this.$store.dispatch('login', { id: response.data.id, name: response.data.name });
        // 导航到首页或其他页面
        this.$router.push('/');
      } catch (error) {
        // 处理错误
      }
    },
  },
};
</script>

4. 在任何需要用户信息的组件中，使用计算属性或函数从Vuex store中获取用户信息：

// AnyComponent.vue
<template>
  <div>
    <p>User ID: {{ userId }}</p>
    <p>User Name: {{ userName }}</p>
  </div>
</template>
 
<script>
export default {
  computed: {
    userId() {
      return this.$store.state.user.id;
    },
    userName() {
      return this.$store.state.user.name;
    },
  },
};
</script>

确保在Vue实例中正确配置了Vuex store，并且在main.js中引入：

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入store.js
 
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

以上代码展示了如何在Vue应用中使用Vuex来管理用户登录状态，并在任何组件中获取用户信息。