前言

Pinia是和Vue3搭配的状态管理库，相对应的Vue2一般搭配Vuex。由于Pinia和Vuex中的state数据都是存储在内存中的，一刷新页面，state数据就会丢失，所以需要将数据持久化才能保证数据不丢失。例如存储到本地存储、Cookie等

手动编写本地存储的增删查改方法太繁琐，所以诞生了持久化插件，这些插件会在更新state数据时，自动同步到本地存储，在初始化state数据时，会自动从本地存储中获取，十分方便。

例如Vue2的持久化插件叫vuex-persistedstate，相应的pinia也有持久化插件，名叫pinia-plugin-persistedstate

本篇使用UniApp + Vue3项目，使用pinia作为状态管理，并搭配pinia-plugin-persistedstate持久化插件

创建项目

• 创建UniApp + Vue3项目

npx degit dcloudio/uni-preset-vue#vite 项目名称

添加pinia和持久化插件

• 添加 pinia

npm i pinia@2.0.27

• 添加 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

配置pinia和持久化插件

• 创建pinia实例，并导出（store/index.js）
• 使用持久化插件

import { createPinia } from 'pinia'

// pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// 创建pinia实例
const pinia = createPinia()
// 使用持久化插件
pinia.use(piniaPluginPersistedstate)

// export * from，将所有按需导出的默认，再次全部按需导出
// 用户信息
export * from "./modules/user"

export default pinia

创建用户信息模块（store/modules/user.js）

• 在defineStore函数的第三个参数中，重写持久化插件的存取方法，转调给UniApp提供的本地存储方法（默认使用的是localStorage，微信小程序中不支持，所以需要重写存取方法，调用UniApp的存取方法，来达到跨端）

/**
 * 用户模块Store
 */
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 登录函数
import { loginAPI } from '@/api/profile'

// 创建Store
export const useUserStore = defineStore('user', () => {
    // 用户信息
    const profile = ref(null)

    // 保存用户信息
    const saveProfile = (userProfile) => {
        // 状态
        profile.value = userProfile
    }

    // 用户token
    const token = computed(() => {
        return profile.value?.token
    })

    // 登录 action方法
    const login = async (username, password) => {
        const result = await loginAPI(username, password)

        // 保存用户信息到本地存储
        saveProfile(result.result)

        uni.showToast({
            title: "登录成功",
            icon: 'success',
            duration: 1500
        })
        
        // 返回到首页
        setTimeout(() => {
            uni.navigateBack()
        }, 1500);
    }

    return {
        profile,
        token,
        saveProfile,
        login
    }
}, {
    // 重要：模块必须开启持久化，才会持久化！！！
    // 注意：默认持久化，只在H5端有效，因为默认使用的是localStorage，小程序端不能使用这个API，所以需要重写存取方法，转调给UniApp的持久化方法
    // persist: true,
    persist: {
        // 默认值，就是使用localStorage
        // storage: localStorage
        // 重写存取方法，转调给UniApp
        storage: {
            getItem(key) {
                return uni.getStorageSync(key)
            },
            setItem(key, val) {
                uni.setStorageSync(key, val)
            }
        }
    }
})

配置pinia到vue实例中（main.js）

import {
    createSSRApp
} from "vue";

import App from "./App.vue";

// 导入pinia
import pinia from "@/store";

export function createApp() {
    const app = createSSRApp(App);
    // 使用pina
    app.use(pinia)
    return {
        app,
    };
}

调用pinia

// 导入创建用户信息Store的函数
import { useUserStore } from '@/store'

// 创建用户信息Store
const userStore = useUserStore()
// 解构出登录action函数
const { login } = userStore

// ...省略登录业务逻辑
login(username, password)