Skip to content

页面状态恢复

PageFlow 会保留有用的预览状态,避免切换页面后界面总是回到初始状态。

自动恢复

支持的原生输入框、下拉框、复选框和滚动位置会被自动捕获并恢复。密码、文件和验证码输入框会被有意排除。

注册应用状态

复杂组件和框架状态可以通过 definePageFlowState 主动接入。

ts
import { onUnmounted, ref } from 'vue'
import { definePageFlowState } from 'unplugin-pageflow/runtime-state'

const activeTab = ref('overview')
const selectedRole = ref('farmer')

const stop = definePageFlowState('page-options', {
  get: () => ({
    activeTab: activeTab.value,
    selectedRole: selectedRole.value,
  }),
  restore: (state) => {
    activeTab.value = state.activeTab
    selectedRole.value = state.selectedRole
  },
})

onUnmounted(stop)

状态键应保持稳定且不重复。get 只返回可序列化、非敏感的数据;restore 应能在页面挂载后安全执行。

隔离方式

状态和缓存预览按完整页面 URL 隔离,包括有业务含义的 Query、Hash 和 PageFlow 预览角色。

安全

不要注册密码、Token、验证码、私钥或客户敏感信息。页面状态恢复是开发工具能力,不是安全存储机制。

基于 MIT 许可证发布。