(资料图片仅供参考)

在Vue2项目中，可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中，具体取决于项目的需求和规模。 1. Vuex状态管理 在Vuex中定义一个user模块，用于存储用户信息，可以在登录成功后将用户信息存储到该模块中。 ```javascript // store/user.js const state = { userInfo: null } const mutations = { setUserInfo(state, userInfo) { state.userInfo = userInfo } } const actions = { login({ commit }, userInfo) { // 调用登录接口 // 登录成功后将用户信息存储到Vuex中 commit("setUserInfo", userInfo) } } export default { namespaced: true, state, mutations, actions } ``` 在需要展示用户信息的组件中，可以通过Vuex的mapState辅助函数获取用户信息并展示。 ```javascript // components/UserInfo.vue <script> import { mapState } from "vuex" export default { computed: { ...mapState("user", ["userInfo"]) } } </script> ``` 2. 浏览器的本地存储 在登录成功后，可以将用户信息存储到浏览器的本地存储中，例如localStorage或sessionStorage。 ```javascript // 登录成功后将用户信息存储到localStorage中 localStorage.setItem("userInfo", JSON.stringify(userInfo)) ``` 在需要展示用户信息的组件中，可以通过localStorage获取用户信息并展示。 ```javascript // components/UserInfo.vue <script> export default { computed: { userInfo() { return JSON.parse(localStorage.getItem("userInfo")) } } } </script> ``` 需要注意的是，使用浏览器的本地存储存储用户信息存在安全风险，因此需要对用户信息进行加密处理。同时，如果用户信息需要在多个页面中展示，建议使用Vuex状态管理。

推荐内容