Vue的全局状态管理目前有两种实现方式，Vuex和Pinia，两者都是vue框架所推荐的状态管理库，只是Vuex出现较早，Pinia是目前Vue开发团队所推荐的方式，兼容Vue2和Vue3。

主要作用

用于前端的数据存储、数据传递和状态管理。

官方文档

Vuex 官方文档

Pinia 官方文档

适用场景

适用于中大型单页应用的开发，可以更好地在组件外部管理状态，但与此相对的，通过Vuex和Pinia进行状态管理会使得开发过程变得更加繁琐，如果是小型单页面应用，可以通过vue框架的stroe模式来实现数据存储和状态控制。

简单状态管理

用户登录状态的保存

1. 保存到 localStorage 中的方式

   // 登陆成功后保存用户信息到localStorage中
   localStorage.setItem('user', JSON.stringify(this.loginForm));
   
   // 从 localStorage 中取出存储的用户信息
   const user = JSON.parse(localStorage.getItem('user'));
   

2. 保存到 Cookie 中，手动封装函数操作cookie

   • cookie工具类

   
   // 登陆成功后调用工具类保存用户信息到Cookie中| 参数列表：cookie名称、cookie值、存活时间（天）
   setCookie("user",JSON.stringify(this.loginForm),1);
   
   // 调用工具类从Cookie中取出对应的值
   const user = JSON.parse(getCookie('user'));
   

3. 通过响应式API实现状态管理

   • store.js定义数据存放形式

   调用store中的全局存储变量

   // 将用户信息存储到store中
   user.updateUserInfo(res.data.data);
   // 清除用户信息
   user.removeUserInfo();