三分钟搞定pinia数据自动本地存储pinia-plugin-persistedstate

1.安装 npm i pinia-plugin-persistedstate 2.引入

// main.js
import {createPinia} from 'pinia'
import persistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persistedstate)

// 最后要注册pinia
app.use(pinia)

3.在pinia模块中使用 这个包提供了第三个defineStore的参数,这个参数是一个对象,用于配置自动化本地存储

import {defineStore} from 'pinia'
import axios from 'axios'

export default defineStore('province', () => {
    const provinceList = ref([])
    const getProvinceList = async () => {
        const res = await axios.getUri('http://ajax-api.itheima.net/api/province')
        console.log(res);
    }
    return {
        getProvinceList,
        provinceList
    }
},
// pinia-plugin-persistedstate的配置项
{
    persist: {
        key: 'province',          // 存储时使用的键名
        storage: sessionStorage,  // 存储方案,默认是localStorage
        paths: ['provinceList']   // 按需存储数据
    }
})