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

在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状态管理。

 

补充一点,在 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'] 
                                }) 
             ] 
        })