在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状态管理。
标签：存储,登录,用户,信息,userInfo,vue2,Vuex,调取 From： https://www.cnblogs.com/bigShui/p/17353792.html