pinia 数据持久化（setup版环境--vue3+ts 项目）

pinia 数据持久化 setup版

1.安装pinia

npm i pinia

2.安装持久化插件

npm i pinia-plugin-persistedstate

3.创建目录然后页面引入

目录结构如下

index.ts 文件代码

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

//模块统一导出

export * from './modules/menuStatus'

menuStatus.ts代码

//引入pinia方法
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const menuStatusStore = defineStore(
    'menuStatus', () => {
        const activeIndex = ref('1')
        const saveActiveIndex = (val: string) => {
            activeIndex.value = val
        }
        return { activeIndex, saveActiveIndex }
    },
    // { persist: true }
    {
        persist: true
    }
)

代码解释
设置 persist:true 即可实现pinia中数据的持久化

4.最重要的一步

在main.ts中引入index.ts文件并app.use(pinia)

import { createApp } from 'vue'
import pinia from '@/stores'
// import { createPinia } from "pinia"
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
// import type pinia from './stores'

const app = createApp(App)

// const pinia = createPinia()
// pinia.use()
app.use(pinia)
app.use(router)
app.use(ElementPlus)

app.mount('#app')

5.这样代码你的项目就实现了持久化

诸君有用且点赞