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

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

javascript">// store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {username: '', // 存储登录用户名的状态userid:'',//储存登录用户id},mutations: {setUsername(state, username) {state.username = username;},setUserid(state, userid) {state.userid = userid;},},
});

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

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

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

javascript"><template><div><p>Welcome, {{ username }}</p></div>
</template><script>
export default {computed: {username() {return this.$store.state.username;},userid() {return this.$store.state.userid;},},
};
</script>

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

1.在登录成功后getUserid是我写的后端接口函数，SetUserId将用户id保存到 localStorage 中。

javascript">    getUserid().then(response => {// 获取用户ID成功const userId = response.data;setUserId(userId); // 保存用户id}).catch(error => {// 获取用户ID失败，可能是因为用户未登录console.error('获取用户ID失败:', error.response.data);// 在这里处理未登录的情况，比如跳转到登录页});

在auth.js中

javascript">// 设置用户id到 localStorage 中
export function setUserId(userId) {localStorage.setItem('userid', userId);
}
export function getUserId() {return localStorage.getItem('userid');
}

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

javascript"><template><div></div>
</template><script>
export default {data() {return {userid:'',};},mounted() {this.user = getUserId('userid');},
};
</script>