pinia数据本地持久化

先上流程图，再去看下面代码

定义pinia单模块

这里用产品模块来举例说明

1. 编写产品模块

import { ref, reactive } from 'vue'
import { defineStore } from 'pinia'
import dataPersisitence from './dataPersistence'
const useProductStore = defineStore('product', () => {
    const productName = ref('A级车')
    const productInfo = reactive({
        name: 'A级车',
        price: 145200,
        count: 10000,
        des: '....'
    })
    const setProductName = (val: string) => {
        productName.value = val
    }

    return {
        productInfo,
        productName,
        setProductName
    }
})
// 调用本地化持久化模块
dataPersisitence(useProductStore, 'productStore')
export default useProductStore

2.编写本地持久化模块

import type { StoreDefinition, _ExtractStateFromSetupStore, _ExtractGettersFromSetupStore, _ExtractActionsFromSetupStore } from 'pinia'
type Store<T> = StoreDefinition<string, _ExtractStateFromSetupStore<T>, _ExtractGettersFromSetupStore<T>, _ExtractActionsFromSetupStore<T>>
const dataPersisitence = <T>(store: Store<T>, key: string) => {
    const cartStore = store()
    cartStore.$subscribe((mutation, state) => {
        console.log('mutation', mutation)
        console.log('state', state)
        try {
            localStorage[key] = JSON.stringify(state)
        } catch (error) {
            console.log(`${key}保存本地数据失败--->`, error)
        }
    })
    const setState = () => {
        const state = localStorage[key]
        if (state) {
            try {
                const value = JSON.parse(state)
                cartStore.$patch(value as Object)
            } catch (error) {
                console.log(`${key}更新本地数据失败`, error)
            }
        }
    }
    setState()
}
export default dataPersisitence

3.页面引用示例

<template>
    <div class="pinia">
        <div class="item">
            <p>{{ productStore.productName }}</p>
            <button @click="productStore.setProductName('B级车')">修改产品信息</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import useProductStore from '../../store/product'
const productStore = useProductStore()
</script>

其实也可以用pinia的插件机制来完成，但是那样只能全量持久化，没办法做到按需，所以就没有贴示例，这是官网截图，可以做的，有兴趣的可以自己试下