【若依】16、Vue3 中的数据加载

Pinia

Pinia 也是一个状态管理工具，作用和 Vuex 基本上是一致的。Pinia 的用法和 Vuex 基本上一模一样，只有导入的时候有一些差异，其他地方基本上都是一致的，所以，使用 Pinia，大家将之当作 Vuex 来使用即可。 Pinia 是一个轻量级的状态管理库（相对于 Vuex 而言），Pinia 和 Vuex 的运行都是比较快的，在一些特殊情况下，Pinia 的运行效率甚至要高于 Vuex，最主要的原因还是因为 Pinia 是一个轻量级的框架，他的体积约 1KB。 Pinia 🍍

前端请求的封装

vhr：封装的请求工具类，将对应的请求方法做成了 Vue 的插件，在需要使用的地方，直接通过 this.getRequest() 去执行网络请求的。 tienchin：将所有的网络请求统一封装起来，然后在需要做网络请求调用的地方，直接去调用对应的方法。 所有被封装的请求，都在 src/api 文件夹中：

• login.js：这个 js 文件中封装了所有和登录相关的网络请求方法，所有的请求方法都已经提前写好请求地址、请求参数、请求头等信息。
• menu.js 封装的就是所有和菜单相关的网络请求。

例如登录请求：

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}

在需要登录的地方，直接调用这个方法，并传递相应的参数即可。

登录流程

1. 根据 router/index.js 中的定义，可以找到登录页面是 views/login.vue 文件。
2. 执行具体的登录方法，已经在src/api/login.js文件中封装好了，因为登录成功后，还要保存用户的一些基本信息（例如 Token），所以还对登录请求方法进行了二次封装，二次封装是在 Pinia 中进行封装的，具体位置在 src/store/modules/user.js文件中，当用户登录成功之后，顺便保存用户的基本信息 Token。

注：单纯就登录来说，登录成功之后，只是保存了用户的 Token，其他事情都没做。

动态菜单加载

TienChin 中的动态菜单加载和 vhr 中的加载思路是一模一样：

1. 用户数据以及动态菜单数据，都是保存在 Pinia 中，Pinia 中的数据特点，就是当用户按了浏览器刷新按钮或者 F5 按钮之后，Pinia 中的数据会丢失。所以，我们需要确保当用户按了浏览器刷新按钮之后，要主动的重新加载一次动态菜单数据。
2. 加载的思路，就是利用全局前置导航守卫，当发生页面跳转的时候，通过全局前置导航守卫可以监听到所有的页面跳转，监听到之后，先去判断 Pinia 中的菜单数据是否还在，如果还在，说明当前跳转就是一次普普通通的页面跳转，否则说明用户是按了 F5 进行的页面跳转，那么此时就要先去加载浏览器的菜单数据了。

   为什么要把菜单数据存到 Pinia/Vuex 中？

   不能存到 sessionStorage 或者 localStorage 中吗？ 首先要明白，服务端返回的动态菜单实际上是有两方面的作用：

3. 渲染左侧的菜单栏，这个好说，哪怕你把菜单数据存到 sessionStorage、localStorage 或者是 Cookie 中，将来都是可以渲染出来的。
4. 添加到路由中，这个路由，说白了，这个路由其实是一个内存对象，从服务端加载到菜单数据之后，我们会将菜单数据动态的加到 router 中，这样，点击左边的菜单项，右边才会进行页面跳转，但是，这个 router 中的数据，是保存在内存中的。这就意味着，如果用户点击了浏览器刷新按钮，或者用户点击了 F5 按钮，都会导致 router 中的数据丢失。如果 router 中的数据丢失了，那么就无法进行页面跳转了。

所以说白了，其实就是 router 这个对象，限制了动态菜单数据，他要求必须在浏览器刷新之后（或者按 F5 之后）重新加载一次动态菜单，否则，浏览器刷新之后，router 中没东西了，没东西就没法进行页面跳转了。