【Pinia】快速入门及数据持久化

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

export const useUserInfoStore = defineStore('userInfo',()=> {
    
    
    const info = ref({
    
    })
    const setInfo = (newInfo) => {
    
    
        info.value = newInfo
    }
    const clearInfo = () => {
    
    
        info.value = {
    
    }
    }
    return {
    
    
        info,setInfo,clearInfo
    }
}, {
    
    
    persist: true
})

其中 persist 为持久化插件，刷新页面 store 数据不丢失。

npm install pinia-persistedstate-plugin

在main.js中，

import {
    
     createPinia } from 'pinia'
//导入持久化插件
import {
    
    createPersistedState} from'pinia-persistedstate-plugin'
const pinia = createPinia()
const persist = createPersistedState()
//pinia使用持久化插件
pinia.use(persist)
app.use(pinia)