使用 Pinia 设置刷新网页数据不会丢失
在开发 Vue.js 应用时,保持状态管理的数据在页面刷新时不丢失是一项常见的需求。Pinia 作为 Vue 的状态管理库,可以通过 pinia-plugin-persist
插件轻松实现数据持久化。本文将详细介绍如何在项目中配置 Pinia 持久化功能。
1. 安装依赖
首先,需要安装 pinia-plugin-persist
插件:
npm install pinia-plugin-persist
2. 配置 main.ts
在 main.ts
文件中引入并使用 pinia-plugin-persist
插件:
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
app.use(pinia);
app.mount('#app');
3. 配置持久化功能
在 Pinia 的 store 文件中,启用数据持久化功能。以下是一个示例 menu.ts
文件的配置:
import { defineStore } from 'pinia';
export const useMenuStore = defineStore('menu', {
state: () => ({
menuData: [],
}),
actions: {
setMenu(data) {
this.menuData = data;
},
getMenuData() {
return this.menuData;
},
},
// 配置持久化功能
persist: {
enabled: true,
},
});
在上述代码中,我们定义了一个名为 useMenuStore
的 store,并通过 persist
配置启用了数据持久化功能。