pinia数据持久化（pinia-plugin-persistedstate)插件使用

Small_sapling

已于 2024-01-05 17:16:45 修改

阅读量1.2k

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js 前端

于 2024-01-04 17:07:34 首次发布

本文链接：https://blog.youkuaiyun.com/small_sapling/article/details/135390523

本文介绍了如何在Vue.js项目中使用pinia-plugin-persistedstate插件实现数据持久化。首先，需要安装pinia和pinia-plugin-persistedstate，然后在main.ts中导入并配置插件，接着在store文件夹下创建appStore.ts，最后在组件中正常使用持久化的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pinia数据持久化（pinia-plugin-persistedstate)插件使用

使用pinia-plugin-persistedstate插件前需先安装pinia插件并导入

pinia官网
 pinia-plugin-persistedstate官网

标题安装pinia-plugin-persistedstate插件

yrun add pinia-plugin-persistedstate
# 或者
npm install pinia-plugin-persistedstate

在mian.ts中导入pinia-plugin-persistedstate插件

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia.use(piniaPluginPersistedstate));
app.mount('#app');

在store文件夹下创建appStore.ts文件

// 使用pinia保存用户信息
import { defineStore } from 'pinia';

export default defineStore('user', {
    state() {
    	// 定义保存数据的对象
       	userInfo: {
       		id: '1001',
       		username: 'admin'
       		
       	}
    },
    actions: {
    	// 定义保存数据的方法
        setUser(userInfo:object) {
        	this.userInfo = userInfo
        }
    },
    // 数据持久化
    persist: {
        enabled: true,
    }
});

在组件中使用

<script setup lang="ts">
	// 导入pinia中存储的对象
	import userInfo from '@/stores/appStore'
	let userStore = userInfo()
	console.log(userStore.userInfo)
</script>

<template>
  	<el-card class="box-card">
    	{{ userStore.userInfo }}
    </el-card>
</template>