Pinia 使用

1.基础使用

和数据相关的操作（state，action）都放到Pinia中，组件只负责触发调用action数据函数

状态管理器：管理数据可以实现多组件共享

例如：用户登录的数据，可能在多个组件中都要通过数据来检验是否已经登录。

组合式写法

// 管理用户相关数据
import { defineStore } from "pinia";
import { ref } from "vue";
import { doLoginAPI } from "@/apis/user.js";

export const useUserStore = defineStore('user', () => {
    // 1.定义获取数据的Store
    const userInfo = ref({});
    // 2.定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await doLoginAPI({ account, password })
        userInfo.value = res.result
    }
    // 3.以对象的形式把state和action return返回

    return {
        userInfo,
        getUserInfo
    }
})

2.Pinia用户数据持久化

目的：保持token不丢失，保持登录状态

最终效果：操作state时，会自动把用户数据在本地的localStorage也存一份，刷新的时候会从localStorage中先取

1. 用户数据中有一个关键的数据叫做Token （用来标识当前用户是否登录），而Token持续一段时间才会过期
2. Pinia存储的数据是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储。