vue3中使用pinia、pinia-plugin-persist解决刷新store数据丢失问题

*

## 注意：**pinia-plugin-persist要触发actions里的方法才会生效**

*
import {defineStore,} from 'pinia'
import {setCookie,removeCookie} from '@/utils/cookie'
export const userStore = defineStore('main', {
    state: () => ({
        user: {
            username: "",
            password: ""
        },
        username: "",
        password:""
    }),
    persist: {
        enabled: true,
        strategies: [{
            storage: localStorage,//localStorage存储多个key
            paths: ['user'],
            key: "user"
        }, {
            storage: localStorage,
            paths: ['password'],
            key: "password"
        },{
            storage: sessionStorage,//sessionStorage存储多个key
            paths: ['password'],
            key: "password"
        }, {
            storage: sessionStorage,
            paths: ['username'],
            key: "username"
        }],
    },
    getters: {
        getUser: (state) => {
            return state.user
        },
    },
    actions: {
        Login(data) {
            return new Promise((resolve, reject) => {
                this.user = {
                    ...this.user,
                    ...data
                }
                this.username = data.username
                this.password = data.password
                setCookie('token', data.username)
                resolve()
            })
        },
        LoginOut(data) {
            console.log(this, data, "+this")
            return new Promise((resolve, reject) => {
                this.user = {}
                this.username = ""
                this.password = ""
                removeCookie("token");
                resolve()
            })

        },
    }
})

//main.js
import {
  createApp
} from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import * as utils from './utils/index'
import piniaPluginPersist from 'pinia-plugin-persist';
import {
  createPinia
} from 'pinia'
const pinia = createPinia();
pinia.use(piniaPluginPersist);


let app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(router).use(ElementPlus).use(pinia)

app.config.globalProperties.$utils = utils
app.mount('#app')