useNetwork

反应式 网络状态。网络信息 API 根据一般连接类型（例如 'wifi'、'cellular' 等）提供有关系统连接的信息。这可用于根据用户的连接选择高清内容或低清晰度内容。整个 API 包括添加 NetworkInformation 接口和 Navigator 接口的单个​​属性：导航器.连接。

¥Reactive Network status. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.

示例

source

isSupported: false
isOnline: true
saveData: false
type: 'unknown'

用法

¥Usage

import { useNetwork } from '@vueuse/core'

const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

console.log(isOnline.value)

要用作对象，请将其用 reactive() 封装

¥To use as an object, wrap it with reactive()

import { reactive } from 'vue'

const network = reactive(useNetwork())

console.log(network.isOnline)

组件用法

¥Component Usage

<template>
  <UseNetwork v-slot="{ isOnline, type }">
    Is Online: {{ isOnline }}
    Type: {{ type }}
  </UseNetwork>
</template>

类型声明

显示类型声明

export type NetworkType =
  | "bluetooth"
  | "cellular"
  | "ethernet"
  | "none"
  | "wifi"
  | "wimax"
  | "other"
  | "unknown"
export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
export interface NetworkState {
  isSupported: Readonly<Ref<boolean>>
  /**
   * If the user is currently connected.
   */
  isOnline: Readonly<Ref<boolean>>
  /**
   * The time since the user was last connected.
   */
  offlineAt: Readonly<Ref<number | undefined>>
  /**
   * At this time, if the user is offline and reconnects
   */
  onlineAt: Readonly<Ref<number | undefined>>
  /**
   * The download speed in Mbps.
   */
  downlink: Readonly<Ref<number | undefined>>
  /**
   * The max reachable download speed in Mbps.
   */
  downlinkMax: Readonly<Ref<number | undefined>>
  /**
   * The detected effective speed type.
   */
  effectiveType: Readonly<Ref<NetworkEffectiveType | undefined>>
  /**
   * The estimated effective round-trip time of the current connection.
   */
  rtt: Readonly<Ref<number | undefined>>
  /**
   * If the user activated data saver mode.
   */
  saveData: Readonly<Ref<boolean | undefined>>
  /**
   * The detected connection/network type.
   */
  type: Readonly<Ref<NetworkType>>
}
/**
 * Reactive Network status.
 *
 * @see https://vueuse.org/useNetwork
 * @param options
 */
export declare function useNetwork(
  options?: ConfigurableWindow,
): Readonly<NetworkState>
export type UseNetworkReturn = ReturnType<typeof useNetwork>

源代码

源代码 • 示例 • 文档

变更日志

No recent changes