vue3 pinia实现持久化详解

npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

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

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  // 使用插件的配置选项
  persist: {
    key: 'my-counter-store',// 自定义存储的键名
    storage: localStorage // 可以改为sessionStorage
  }
});

import { defineStore } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    // 假设还有其他状态值不需要持久化
    anotherValue: 'some value'
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  // 使用插件的配置选项
  persist: {
    key: 'my-counter-store', // 自定义存储的键名
    storage: localStorage, // 可以改为sessionStorage
    paths: ['count'] // 只对count进行持久化
  }
});