使用插件
使用 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博客