博客

调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面

  • Post author:
  • Post category:vue




文件封装

在这里插入图片描述



步骤

  1. 核心请求文件

在这里插入图片描述

  1. 在

    apiUse

    文件夹中的

    index.js

    文件写

    API接口方法

在这里插入图片描述


  • baseURL + url

    后台完整地址
  1. 将信息写入

    store

    文件夹中的

    index.js

    文件

    将信息保存到Vuex中，Vuex管理全局共享的数据

①引入接口方法

在这里插入图片描述

②

state

变量中定义要接收的对象

在这里插入图片描述

③

mutations

方法更新信息

在这里插入图片描述

④

actions

方法请求用户信息保存到

state

变量 里userInfo中

在这里插入图片描述

⑤

getters

方法定义并导出用户信息

在这里插入图片描述

  1. 在 router 文件夹中的 index.js 文件中进行

    路由守卫

引入

import store from '@/store'

beforeEach 页面发送跳转就走一次，在函数中判断是否已登录 (token) 并

获取用户信息

=>store.dispatch(‘getUserInfoActions’)

在这里插入图片描述

  1. 渲染页面


template

中渲染用户信息

在这里插入图片描述


script

中引入 mapGetters

在这里插入图片描述

最后在

computed

计算属性中使用

在这里插入图片描述


版权声明：本文为Ceiee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。