Pinia Plugin Persist 教程

最新推荐文章于 2025-04-30 17:00:43 发布

原创最新推荐文章于 2025-04-30 17:00:43 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

Pinia Plugin Persist 教程

项目地址:https://gitcode.com/gh_mirrors/pi/pinia-plugin-persist

1. 项目介绍

Pinia Plugin Persist 是一个用于 Vue.js 应用的 Pinia 插件，它允许你在浏览器的 sessionStorage 或其他存储中持久化 Pinia 的状态数据。该项目受到了 vuex-persistedstate 的启发，简化了 Pinia 中的数据持久化过程。

2. 项目快速启动

安装依赖

在你的项目中安装 pinia 和 pinia-plugin-persist：

npm install pinia
npm install pinia-plugin-persist

Vue2 示例

import Vue from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';

import App from './App.vue';

const pinia = createPinia();
pinia.use(piniaPersist);

Vue.use(VueCompositionAPI);
Vue.use(pinia);

new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app');

Vue3 示例

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';

import App from './App.vue';

const pinia = createPinia();
pinia.use(piniaPersist);

createApp(App).use(pinia).mount('#app');

Nuxt.js 示例

在 plugins/pinia-plugin-persist.client.ts 文件中添加插件配置：

import { Context } from '@nuxt/types';
import piniaPersist from 'pinia-plugin-persist';

export default ({ app }: Context) => {
  app.pinia.use(piniaPersist);
};

然后，在 nuxt.config.js 文件中引入该插件：

export default {
  plugins: [
    { src: '~/plugins/pinia-plugin-persist.client', ssr: false },
  ],
};

3. 应用案例和最佳实践

为了确保数据正确地被持久化，你可以定义不同的存储策略。例如，只持久化特定的 store：

import { defineStore } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';

// 设置存储策略
piniaPersist({
  storage: localStorage,
  strategies: {
    user: {
      paths: ['firstName', 'lastName'],
    },
  },
});

export const useUserStore = defineStore('user', {
  state: () => ({
    firstName: '',
    lastName: '',
  }),
});

在这个例子中，只有 user store 的 firstName 和 lastName 会被存储在 localStorage 中。