使用

提示
默认存储为项目运行时，会随着项目卸载清空存储；如果需要持续存储保证页面刷新存储不丢失，使用 $lastingDataOpen API 开启

查看 $lastingDataOpen 用法

引入

import { $useSaveStatus } from 'vue-save-status'

使用例子

• 在输入框输入内容，然后切换组件或页面，再次进入组件会发现组件销毁时的数据已经被记录，可在任何时候调用recoverDataAction函数恢复数据。
• 组件第一次渲染不会记录数据，记录数据阶段发生在onBeforeUnmount生命周期阶段

Main

当前备份数据:

在下方input输入内容然后切换组件

script setup

import { $useSaveStatus } from "vue-use-status";
import {ref} from "vue";

const text = ref('默认文本1')
const text2 = ref('默认文本2')
const obj = ref({
  name:'默认name',
  age:'默认age',
})

const { recoverDataAction, recoverData, reSetData,controlRecord } = $useSaveStatus('test-save', text,text2,obj)

template

<template>
  <div class="main">
    <p>备份数据:{{recoverData}}</p>
    <button @click="recoverDataAction">恢复数据</button>
    <button @click="reSetData">重置数据</button>
    <p>在下方input输入内容然后切换组件</p>
    <input class="input" type="text" v-model="text">
    <input class="input" type="text" v-model="text2">
    <input class="input" type="text" v-model="obj.name">
    <input class="input" type="text" v-model="obj.age">
  </div>
</template>