在Vue2项目中，可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中，具体取决于项目的需求和规模。
1. Vuex状态管理
在Vuex中定义一个user模块，用于存储用户信息，可以在登录成功后将用户信息存储到该模块中。
// store/user.js
const state = {
userInfo: ''
}
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辅助函数获取用户信息并展示。
// 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。
// 登录成功后将用户信息存储到localStorage中
localStorage.setItem('userInfo', JSON.stringify(userInfo))
在需要展示用户信息的组件中，可以通过localStorage获取用户信息并展示。
// 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状态管理。
文章来源地址https://www.toymoban.com/news/detail-425152.html
补充一点,在 Vue 中，可以使用浏览器的本地存储（localStorage 或 sessionStorage）来存储数据。
当页面重新加载时，浏览器会自动将存储在本地存储中的数据读取出来，因此可以在页面重新加载后重新加载到 Vuex 中。
具体来说，可以在 Vue 应用中使用 Vuex 插件 vuex-persistedstate 来实现将 Vuex 中的数据存储到本地存储中。该插件会在每次 Vuex 状态发生变化时，将状态数据存储到本地存储中。当页面重新加载时，该插件会自动将存储在本地存储中的数据读取出来，并将其设置为 Vuex 的初始状态。
因此，通过使用 vuex-persistedstate 插件，可以实现在页面重新加载后重新加载到 Vuex 中。
首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化
npm i vuex-persistedstate
然后：在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js和category.js三个模块。 (根据项目需求创建)
继续：在 src/store/index.js 中导入 user cart category 三模块。
import user from './modules/user' import cart from './modules/cart' import category from './modules/category'
最后：使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
// 引入vuex持久化方法createPersistedState
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'
export default createStore({
state: {},
mutations: {},
actions: {},
getters: {},
modules: {
// 模块化数据
user,
cart,
category
},
plugins: [
// veux持久化配置
createPersistedstate({
key: 'rabbitstore-client',
paths: ['user', 'cart', 'category']
})
]
})
文章来源：https://www.toymoban.com/news/detail-425152.html
到了这里，关于vue2项目中调取登录接口登录以后获取个人信息以后,储存在哪里,怎么在不同的页面展示想要的信息?的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
