Vue3中pinia持久化

使用插件

使用 pinia-plugin-persistedstate 插件

npm i pinia-plugin-persistedstate

 组合式用法

与正常用法多了第三个参数：{ persist: true }

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useFormStore = defineStore(
  'form',
  () => {
    const form_obj = ref(null)
    return { form_obj }
  },
  { persist: true }
)

选项式用法

参考插件官方：快速开始 | pinia-plugin-persistedstate

不用插件实现持久化

在 APP.vue 中添加以下方法，弊端是每个 stores 多得添加

// APP.vue

import { useFormStore } from '@/stores/form'
const store = useFormStore()

window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('storeCache', JSON.stringify(store))
})
const storeCache = sessionStorage.getItem('storeCache')
if (storeCache) {
  store.$patch({
    ...JSON.parse(storeCache)
  })
  sessionStorage.clear()
}

调用

调用时不要直接解构，如要解构可使用 toRefs

import { toRefs } from 'vue'
import { useFormStore } from '@/stores/form'

const store = useFormStore()
console.log(store.form_obj)

// 解构用法
// 错误写法，会失去响应式
// const { form_obj } = useFormStore()
// 正常实现
// const { form_obj } = toRefs(useFormStore())

参考

pinia官方

Pinia | The intuitive store for Vue.js

博客

Pinia使用方法及持久化存储_pinia持久化-CSDN博客

Pinia？看这篇就够了-CSDN博客