在 Vue.js 中，你可以使用多种方式来存储和管理用户的登录信息，如用户名、ID 等。以下是一些常见的解决方案： 1. **Vuex（状态管理库）** Vuex 是 Vue.js 官方提供的状态管理库，适用于管理组件之间共享的状态，包括用户登录信息。 创建一个 store 文件，并在其中设置一个模块（如 user）来专门存储用户信息： ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { userInfo: null // 初始状态下用户信息为空 }, mutations: { setUserInfo(state, payload) { state.userInfo = payload } }, actions: { async login({ commit }, credentials) { // 这里模拟从服务器获取用户信息 const userInfo = await fetchUserFromServer(credentials) commit('setUserInfo', userInfo) } } }) ``` 在需要使用用户信息的组件中，可以通过 `this.$store.state.userInfo` 访问。 2. **浏览器 localStorage 或 sessionStorage** 可以将用户信息保存在浏览器的本地存储或会话存储中，方便下次页面加载时恢复用户状态。 登录成功后存储用户信息： ```javascript localStorage.setItem('userInfo', JSON.stringify(userInfo)) ``` 加载页面时获取用户信息： ```javascript const userInfo = JSON.parse(localStorage.getItem('userInfo')) ``` 3. **Vue 实例的数据属性 (data)** 如果你只需要在一个特定的 Vue 组件中保存用户信息，可以直接将其存储为该组件实例的 data 属性。 ```javascript // 在某个组件中 export default { data() { return { userInfo: null } }, methods: { async login(credentials) { // 模拟登录操作 const userInfo = await fetchUserFromServer(credentials) this.userInfo = userInfo } } } ``` 选择哪种方法取决于你的应用需求，例如是否需要跨多个组件共享用户信息，或者用户信息是否需要持久化等。