URL 同步
场景附带一个 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 });
});
}
}