pinia数据持久化

pinia数据持久化

1、创建一个持久化插件，将数据保存在本地存储中

// 创建一个持久化插件，将数据保存在本地存储中
const persist = createPersist({
  // 指定要持久化的 store 模块，可以是一个或多个
  // 这里我们只持久化一个偏好设置模块
  store: pinia.store('preference'),

  // 指定持久化的键（存储在本地存储中的键）
  key: 'my-app-preference',

  // 指定存储引擎，可以是 localStorage、sessionStorage 或其他自定义引擎
  // 这里使用默认的 localStorage
  storage: localStorage,
});

// 在 Pinia 实例中注册持久化插件
pinia.use(persist);

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

2、创建一个 Pinia store 模块usePreferenceStore 来管理用户的偏好设置： 其中的state喝actions都是可以直接被使用的，

import { defineStore } from 'pinia';

export const **usePreferenceStore** = defineStore('preference', {
  state: () => ({
    theme: 'light', // 默认主题
    language: 'en', // 默认语言
  }),

  actions: {
    // 设置主题
    setTheme(theme) {
      this.theme = theme;
    },

    // 设置语言
    setLanguage(language) {
      this.language = language;
    },
  },
});

persist: {
    enabled: true, //开启
    strategies: [
      {
        key: "USER_**PREFERENCE**",
        storage: sessionStorage,
        paths: ["theme", "language"],
      },
    ],
  },

3、使用 Pinia store 来管理和持久化用户的偏好设置：

// components/Preference.vue

<template>
  <div>
    <h2>用户偏好设置</h2>
    <label>
      主题：
      <select v-model="theme">
        <option value="light">浅色主题</option>
        <option value="dark">深色主题</option>
      </select>
    </label>
    <br />
    <label>
      语言：
      <select v-model="language">
        <option value="en">英语</option>
        <option value="es">西班牙语</option>
      </select>
    </label>
  </div>
</template>

<script>
import { computed } from 'vue';
import { usePreferenceStore } from '../store/preference';

export default {
  setup() {
    // 获取偏好设置 store
    const preferenceStore = usePreferenceStore();

    // 使用 computed 属性来读取和设置偏好设置
    const theme = computed({
      get: () => preferenceStore.theme,
      set: (value) => preferenceStore.setTheme(value),
    });

    const language = computed({
      get: () => preferenceStore.language,
      set: (value) => preferenceStore.setLanguage(value),
    });

    return {
      theme,
      language,
    };
  },
};
</script>
```## 标题