总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
总站首页
首页
目录
Koffi中文文档
video.js中文文档
KubeJS中文文档
Npmlibrary

useStore

预计阅读时间: 3 分钟

访问存储状态和操作的钩子，支持基于选择器的订阅。

useStore 直接订阅存储实例。它与 usePlayer 具有相同的两个重载——不带选择器用于存储访问，或带选择器用于响应式状态。在播放器提供者内，usePlayer 通常更简单，因为它从上下文读取存储。当你直接拥有存储实例或需要从存储派生计算值时，请使用 useStore。

示例

存储访问

不带选择器调用 useStore(store) 获取存储实例用于命令式操作。组件不会订阅状态变更。

import { createPlayer, useStore } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

const Player = createPlayer({
  features: videoFeatures,
});

function SeekControls() {
  const store = Player.usePlayer();
  const s = useStore(store);

  return (
    <div className="controls">
      <button type="button" onClick={() => s.seek(0)}>
        Go to start
      </button>
      <button type="button" onClick={() => s.seek(s.state.duration / 2)}>
        Go to middle
      </button>
    </div>
  );
}

export default function StoreAccess() {
  return (
    <Player.Provider>
      <Player.Container className="media-container">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <SeekControls />
      </Player.Container>
    </Player.Provider>
  );
}

选择器订阅

传递选择器来从存储派生和订阅计算值。当派生值变更时，组件会重新渲染，默认使用浅相等比较。

import { createPlayer, useStore } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';

const Player = createPlayer({
  features: videoFeatures,
});

function DerivedState() {
  const store = Player.usePlayer();
  const derived = useStore(store, (s) => ({
    remaining: s.duration - s.currentTime,
    progress: s.duration > 0 ? (s.currentTime / s.duration) * 100 : 0,
  }));

  return (
    <dl className="panel">
      <div>
        <dt>Remaining</dt>
        <dd>{derived.remaining.toFixed(1)}s</dd>
      </div>
      <div>
        <dt>Progress</dt>
        <dd>{derived.progress.toFixed(1)}%</dd>
      </div>
    </dl>
  );
}

export default function Selector() {
  return (
    <Player.Provider>
      <Player.Container className="media-container">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <DerivedState />
      </Player.Container>
    </Player.Provider>
  );
}

API 参考

不带选择器

访问存储状态和操作。

不带选择器：返回存储，不订阅变更。带选择器：返回所选状态，当所选状态变更时重新渲染（shallowEqual）。

参数

参数类型默认值说明
store*S—存储实例

返回值

S

带选择器

从存储中选择一个值。当所选值变更时重新渲染（shallowEqual）。

参数

参数类型默认值说明
store*S—存储实例
selector*Selector<InferStoreState<S>, R>—从存储状态派生值
isEqualComparator<R>—自定义相等函数。默认为 shallowEqual

返回值

R

参见

目录