Url 同步

Scenes 自带 URL 同步系统，可以实现场景对象状态与 URL 的双向同步。

UrlSyncContextProvider

要启用 URL 同步，您需要将根场景包裹在 UrlSyncContextProvider 中

<UrlSyncContextProvider scene={scene} updateUrlOnInit={true} createBrowserHistorySteps={true} />

SceneApp

对于使用 SceneApp 的场景应用，URL 同步已为您初始化，但您仍然可以在 SceneApp 状态中设置 URL 同步选项。

function getSceneApp() {
  return new SceneApp({
    pages: [],
    urlSyncOptions: {
      updateUrlOnInit: true,
      createBrowserHistorySteps: true,
    },
  });
}

SceneObjectUrlSyncHandler

设置了 _urlSync 属性的场景对象可以选择将其部分状态同步到/从 URL。

此属性具有以下接口类型

export interface SceneObjectUrlSyncHandler {
  getKeys(): string[];
  getUrlState(): SceneObjectUrlValues;
  updateFromUrl(values: SceneObjectUrlValues): void;
  shouldCreateHistoryStep?(values: SceneObjectUrlValues): boolean;
}

updateFromUrl 的当前行为有点奇怪，它只会传递与 getUrlState 返回值不同的 URL 值。

浏览器历史记录

如果启用了 createBrowserHistorySteps，则对于 shouldCreateHistoryStep 返回 true 的状态更改，将返回新的浏览器历史记录状态。

SceneObjectUrlSyncConfig

此类实现了 SceneObjectUrlSyncHandler 接口，是一个实用程序类，旨在简化场景对象实现 URL 同步行为的过程。

示例

export class SomeObject extends SceneObjectBase<SomeObjectState> {
  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['from', 'to'] });

  public getUrlState() {
    return { from: this.state.from, to: this.state.to };
  }

  public updateFromUrl(values: SceneObjectUrlValues) {
    const update: Partial<SomeObjectState> = {};

    if (typeof values.from === 'string') {
      update.from = values.from;
    }

    if (typeof values.to === 'string') {
      update.to = values.to;
    }

    this.setState(update);
  }

  onUserUpdate(from: string, to: string) {
    // For state actions that should add browser history wrap them in this callback
    this._urlSync.performBrowserHistoryAction(() => {
      this.setState({ from, to });
    });
  }
}