Vue3入门 - Pinia使用（替代Vuex）

        pinia是Vue的存储库，它允许您跨组件/页面共享状态。它Vuex的替代品，其功能和性能更优于vuex，在后期使用中会逐渐被大家发现。

        这里我们先使用pinia全局存储用户信息、接口访问令牌、菜单列表等数据，当然这些只是作为一个项目的基础部分，其他共享信息可根据你们的项目需求进行添加。

一、安装

        在创建项目时，一般会有选项可以选择是否安装Pinia，选择是即可。如果创建项目里错过了也没关系，通过命令安装即可。代码如下：

// npm安装
npm i pinia
// yarn安装
yarn add pinia
// pnpm 安装
pnpm add pinia

二、Pinia使用

2.1 定义数据类型

        在Vue3+ts开中，对变量的定义和书写规则，则需要按ts语法进行编写，否则编辑器则会显示波浪线并提示您。

        在项目的src/types目录下创建global.ts，用于存储类型数据。代码如下：

// 用户数据 接口
export interface UserInfo {
  id?: number   // id
  username: string  // 用户名
  avatar?: string   // 头像
}
export type UserInfoType = UserInfo

// 菜单信息 接口
export interface MenuListInfo {
  id: number
  name: string,
  icon?: string,
  children: Array<MenuListInfo>
}
export type MenuListInfoType = MenuListInfo

2.2 创建global.ts

       用户信息、访问令牌、菜单令牌在项目中使用频率较高，这里将这些信息放在global.js全局文件中。在src/stores目录中创建global.js，代码如下：

import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'
import type { UserInfoType, MenuListInfoType } from '@/types/global'

// 用户信息
export const useUserInfoStore = defineStore('userInfo', () => {
  // 定义用户信息状态（添加默认数据）
  let userInfo = reactive<UserInfoType>({username: '匿名'})
  // 定义getters获取用户信息响应数据
  const user_info = computed(() => userInfo)
  // 定义actions添加或修改用户信息函数
  const userInfoChange = (_value: UserInfoType) => userInfo = _value
  return { user_info, userInfoChange }
})

// 访问令牌
export const useAccessTokenStore = defineStore('accessToken', () => {
  // 定义访问令牌状态
  const accessToken = ref<string>('')
  // 定义getters获取访问令牌响应式数据
  const access_token = computed(() => accessToken)
  // 定义actions添加或修改访问令牌
  const accessTokenChange = (_value: string) => accessToken.value = _value
  return { access_token, accessTokenChange }
})

// 菜单列表令牌
export const useMenuListStore = defineStore('menuList', () => {
  // 定义菜单列表状态
  let menuList = reactive<Array<MenuListInfoType>>([])
  // 定义getters获取菜单数据
  const menu_list = computed(() => menuList)
  // 定义actions添加或修改菜单信息
  const menuListChange = (_value: Array<MenuListInfoType>) => menuList = _value
  return { menu_list, menuListChange }
})

2.3 创建login.ts

        当登录成功后，一般接口会同时返回用户信息和访问令牌，如果我们不希望引入useUserInfoStore后又引入useAccessTokenStore，使用一个use