什么是pinia？
Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计，旨在替代 Vuex。它的主要特点包括：
简单易用：
Pinia 的 API 设计直观，可以更容易地上手和使用。
响应式：基于 Vue 3 的响应式系统，状态变化会自动反映在 UI 上，确保数据和视图始终保持同步。
模块化：
可以定义多个 store，每个 store 可以管理自己的一组状态和行为，方便组织和维护代码。
持久化支持：
通过配置，可以实现状态的持久化存储，方便在页面刷新后保持状态。
开发者工具支持：提供了与 Vue DevTools 的集成，方便调试和查看状态变化。
pinia与vuex之间有哪些异同？为什么选择pinia？
相同点
状态管理：两者都用于在 Vue 应用中集中管理状态，确保多个组件可以共享和修改同一份数据。
响应式：它们都基于 Vue 的响应式系统，状态变化会自动更新相关组件。
插件支持：两者都支持插件机制，允许扩展功能，如持久化存储和调试工具。
不同点
API 设计：
Vuex：使用模块化的方式，通常需要定义 mutations、actions 和 getters，结构相对复杂。
Pinia：使用简单的函数式 API，定义 store 时更加直观，不需要区分 mutations 和 actions。
TypeScript 支持：
Vuex：TypeScript 支持相对较复杂，通常需要额外的类型声明。
Pinia：内置了更好的 TypeScript 支持，类型推导更加友好。
持久化：
Vuex：需要额外的插件来实现状态的持久化。
Pinia：可以通过简单的配置实现内置的持久化支持。
开发者体验：
Vuex：虽然有 Vue DevTools 支持，但调试和追踪状态变化相对复杂。
Pinia：提供更好的开发者体验，状态变化的调试更为直观。
学习曲线：
Vuex：由于其复杂的结构和概念，学习曲线较陡。
Pinia：API 简单明了，更容易上手。
下面举个例子示范步骤
使用 Pinia 的步骤相对简单，以下是基本的使用流程：
1. 安装 Pinia
首先，在项目中安装 Pinia：
npm install pinia
2.创建 Pinia 实例（此处包含了persist插件，具体看下文）
在你的 Vue 应用中创建 Pinia 实例，通常在 main.js 或 main.ts 中：
import './assets/main.scss'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router'
import App from './App.vue'
import {createPinia} from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'
import locale from 'element-plus/dist/locale/zh-cn.js'
const app = createApp(App);
const pinia = createPinia();
const persist = createPersistedState();
pinia.use(persist)
app.use(pinia)
app.use(router)
app.use(ElementPlus,{locale});
app.mount('#app')
3. 定义 Store
使用 defineStore 创建一个 store。在你的 stores 目录下创建一个新的文件，如 useTokenStore.js：
//定义store
//导入了 defineStore 和 ref。defineStore 用于定义一个新的 store，而 ref 用于创建响应式的数据。
import {defineStore} from 'pinia'
import {ref} from 'vue'
/*
第一个参数:第一个参数是 store 的唯一名称 'token'
第二个参数:函数,函数的内部可以定义状态的所有内容,返回一个对象，该对象包含状态和方法。
*/
export const useTokenStore = defineStore('token',()=>{
//定义状态的内容
//1.响应式变量
//使用 ref 创建了一个响应式变量 token，初始值为空字符串。
//ref 会确保在更新 token 的值时，任何依赖于它的组件都会自动重新渲染。
const token = ref('')
//2.定义一个函数,修改token的值
//当调用 setToken 时，token.value 将被设置为传入的 newToken。
const setToken = (newToken)=>{
token.value = newToken
}
//3.函数,移除token的值,通常用于登出
const removeToken = ()=>{
token.value=''
}
//return 返回一个对象，其中包含 token、setToken 和 removeToken，
//使得它们在使用该 store 的组件中可用。
return {
token,setToken,removeToken
}
},{
//第二个参数配置 persist: true，
//表示这个 store 的状态会被持久化，可以在页面刷新后保留 token 的值。
persist:true//持久化存储
});
4.使用（以登录为例）
//绑定数据,复用注册表单的数据模型
//表单数据校验
//登录函数
import {useTokenStore} from '@/stores/token.js'
import {useRouter} from 'vue-router'
const router = useRouter()
const tokenStore = useTokenStore();
const login =async ()=>{
//调用接口,完成登录
let result = await userLoginService(registerData.value);
/* if(result.code===0){
alert(result.msg? result.msg : '登录成功')
}else{
alert('登录失败')
} */
ElMessage.success(result.msg ? result.msg : '登录成功')
//把得到的token存储到pinia中
tokenStore.setToken(result.data)
//跳转到首页 路由完成跳转
router.push('/')
}
在我的代码逻辑当中，pinia起到了什么作用？
集中管理状态：
Pinia 将 token 的状态集中管理，使得应用中的多个组件能够共享和访问相同的 token 数据，而无需通过 props 或事件逐层传递。
响应式更新：
使用 ref 创建的 token 是响应式的，任何对 token 的修改都会自动更新依赖于该 token 的组件，确保 UI 始终反映最新的状态。
简化的状态修改：
通过 setToken 和 removeToken 函数，提供了简单的 API 来修改和清空 token，减少了对状态修改的复杂操作。
持久化存储：
如果配置了持久化，Pinia 能够在用户刷新页面后保持 token 的值，这对于用户登录状态的持续性至关重要。
易于集成：
Pinia 的设计使得将状态管理与路由和其他逻辑（如登录流程）无缝集成变得简单。例如，成功登录后可以轻松地将 token 存储在 Pinia 中并进行路由跳转。
除此之外，我们还需要Pinia 的持久化插件 pinia-plugin-persistedstate，使得状态持久化存储，以至于刷新不丢失
介绍
持久化插件 pinia-plugin-persistedstate 使得可以将 store 的状态持久化存储在浏览器的本地存储中（如 localStorage 或 sessionStorage）。这意味着即使用户刷新页面或关闭浏览器，状态仍然能够保持不变
主要功能
状态持久化：自动将指定的 store 状态保存到本地存储中，确保在页面刷新后依然可用。
灵活配置：可以配置哪些状态需要持久化，哪些不需要，并可以选择使用 localStorage 或 sessionStorage。
数据恢复：在应用初始化时，持久化的状态会自动加载到 store 中，使得用户体验更为顺畅。
步骤
1.安装插件： 首先，你需要安装持久化插件：
npm install pinia-plugin-persistedstate
2.配置 Pinia： 在创建 Pinia 实例时，使用该插件：
上面的实例代码当中有，这里我就不重复代码了
3.定义 Store： 在定义 store 时，配置持久化选项：
上面的定义store部分当中也有了
,{
//第二个参数配置 persist: true，
//表示这个 store 的状态会被持久化，可以在页面刷新后保留 token 的值。
persist:true//持久化存储
}