vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?

本文主要是介绍vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在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 <template> <div> <p>用户名：{{ userInfo.username }}</p> <p>邮箱：{{ userInfo.email }}</p> </div> </template> <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 <template> <div> <p>用户名：{{ userInfo.username }}</p> <p>邮箱：{{ userInfo.email }}</p> </div> </template> <script> export default { computed: { userInfo() { return JSON.parse(localStorage.getItem('userInfo')) } } } </script> ``` 需要注意的是，使用浏览器的本地存储存储用户信息存在安全风险，因此需要对用户信息进行加密处理。同时，如果用户信息需要在多个页面中展示，建议使用Vuex状态管理。

这篇关于vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！