Pinia 是 Vue3 的新一代状态管理库，提供了更简单的 API 和更好的 TypeScript 支持。它作为 Vuex 的替代方案，成为了管理 Vue 应用状态的首选。Pinia 是 Vue3 的新一代状态管理库。与 Vuex 相比，Pinia 提供了更简单的 API、更好的性能，并且完全支持 Vue3 的组合式 API 和 TypeScript。Pinia 的设计理念是尽量简化状态管理，减少不必要的复杂性，使开发者能够专注于业务逻辑的实现。
这篇文章用来记录怎样使用Pinia实现保存用户数据。

1. 首先新建一个useStore.ts文件

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { loginAPI } from '@/apis/user';export const userStore = defineStore('user', () => {// 定义数组const userInfo= ref({})// 获取数据const getUserInfo = async ({account, password}) => {const res = await loginAPI({account, password})userInfo.value = res.result}// 返回数据return {userInfo,getUserInfo}
},{// 数据持久化persist: true
})

2. 在main.ts中配置
   要想实现持久化需要安装pinia-plugin-persistedstate插件
   

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'import App from './App.vue'
import router from './router'// 引入初始化样式文件
import '@/styles/common.scss'
// 引入图片延迟加载
import { lazyPlugin } from '@/directives/index'
// 引入全局组件
import { componentPlugin } from '@/components'
// pinia 持久化const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)app.use(pinia)
app.use(router)
// 使用图片延迟加载插件
app.use(lazyPlugin)
app.use(componentPlugin)app.mount('#app')

3. 在登录方法中使用定义的useStore