Pinia使用

当我们需要在不同页面之间传递参数时，可以使用vuerouter 的query。

如果要在多个页面共享数据，可以使用pinia存储，虽然可以使用local storage，但是pinia更加安全。

简介 | Pinia (vuejs.org)

使用场景

在前端经常需要获取当前登录的用户信息，如果每次获取用户信息都要向后端发起请求会增加后端压力。

因此需要用到pinia存储当前登录的用户信息。只需要在用户登录成功后，把后端返回的当前登录的用户信息存储到pinia，在别的页面需要用到用户信息时，可以从pinia中取出，不需要再向后端发送请求。

安装

1.安装pinia

        npm insatll pinia

2.安装持久化插件，保证在页面刷新、跳转后pinia存储不失效

        npm i pinia-plugin-persistedstate

在mian.js中使用pinia和持久化插件

import { createApp } from 'vue'
import App from './App.vue'
import {router} from "./route/route.ts";
import 'vant/lib/index.css'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router)

// 使用pinia
const pinia = createPinia()
// 使用持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)

app.mount('#app')

定义pinia

使用defineStore定义一个存储空间，defineStore（“存储空间名称”，Setup 函数），存储空间名称要唯一

这里用的是Setup Store的定义语法

定义存储空间

1. 定义存储变量

2. 定义set方法

3. 定义remove方法

4. 最后将变量、set、remove方法return出去

5. 将pinia设置为持久化

import {defineStore} from "pinia";
import {ref} from "vue";

export const useUserStore = defineStore('userInfo',()=>{
    // 用户信息
    const userInfo = ref()
    // 设置方法
    const setUserInfo = (user)=>{
        userInfo.value = user
    }
    // 移除方法
    const remove = ()=>{
        userInfo.value = undefined
    }
    return {userInfo,setUserInfo,remove}
},{
    persist: true,
},)

使用

设置变量

showSuccessToast("登录成功")
// 存储当前用户登录信息
const userInfoStore = useUserStore();
userInfoStore.setUserInfo(res.data)

 获取变量

// 获取当前用户信息
const userStore = useUserStore();
userInfo.value = userStore.userInfo