spz-state 状态管理

用于持久化存储页面状态，支持将状态保存到 localStorage 或 sessionStorage

布局

container

何时使用

需要在页面刷新后保留用户操作状态时，例如：收藏、已读标记等。
需要在多个组件之间共享并同步状态时。
需要切换布尔值状态（开/关、已读/未读等）时，配合 toggle 方法使用。

代码演示

基本用法

通过 state-key 指定存储键名，配合 spz-render 渲染当前状态；点击按钮调用 toggle 方法切换状态，状态会自动持久化到 localStorage。

<spz-state
  id="demo-fav-state"
  layout="container"
  state-key="demo_fav_key"
  state-id="liked"
  @stateChange="fav-render.render"
>
  <spz-render
    id="fav-render"
    layout="container"
    src="custom:demo-fav-state.getState"
  >
    <template>
      <div class="state-demo-wrap">
        <div class="state-card">
          <div class="state-card-info">
            <div class="state-card-title">经典白色T恤</div>
            <div class="state-card-sub">${data.liked ? '已加入收藏 ❤️' : '点击右侧收藏商品'}</div>
          </div>
          <button
            class="state-fav-btn"
            data-liked="${data.liked ? 'true' : 'false'}"
            @tap="demo-fav-state.toggle()"
          >
            ${data.liked ? '❤️ 已收藏' : '🤍 收藏'}
          </button>
        </div>
      </div>
    </template>
  </spz-render>
</spz-state>

属性

属性名	说明	类型	默认值	是否必需
state-key	localStorage / sessionStorage 中的存储键名	string	-	是
state-type	存储类型，可选：`localStorage` \| `sessionStorage`	string	`localStorage`	否
state-id	默认的 state_id，方法调用未传参时使用该值	string	-	否

方法

toggle

切换指定 state_id 对应的布尔值状态，切换后自动持久化并触发 stateChange 事件。

参数	说明	类型	是否必需
state_id	要切换的状态 id，未传时使用组件 `state-id` 属性的值	string	否

事件

stateChange

状态发生变更时触发，事件数据为 { [state_id]: newValue } 格式的对象。