使用 Pinia 设置刷新网页数据不会丢失

使用 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 配置启用了数据持久化功能。