Pinia 持久化方案使用 pinia-plugin-persistedstate 插件使用useLocalStora

方案一

使用 pinia-plugin-persistedstate 插件

方案二

使用useLocalStorage函数包装，详见vueuse

import { ref } from 'vue';
import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';

export const useFormStore = defineStore('formInfo', () => {
  const formInfo = ref(
    useLocalStorage('formInfo', {
      basic: {},
    })
  );

  return { formInfo };
});

方案三

用 watch 来监听store数据变化，并存储到 localStorage
初始化时，判断localStorage有没有存储的值，有则赋值

import { ref, watch } from 'vue';
import { defineStore } from 'pinia';

export const useFormStore = defineStore('form', () => {
  const formInfo = ref({
    basic: {},
  });

  if (localStorage.getItem('formInfo')) {
    formInfo.value = JSON.parse(localStorage.getItem('formInfo') as string);
  }
  
  watch(
    formInfo,
    (newV) => {
      localStorage.setItem('formInfo', JSON.stringify(newV));
    },
    {
      deep: true,
    }
  );

  return {  formInfo };
});