VueUse中文文档useNetwork
响应式 Network status。网络状态 API 可以获取到系统的网络连接信息，比如说连接方式是 WiFi 还是蜂窝。应用程序可以根据此信息为用户展现不同清晰度的内容。该 API 是由 NetworkInformation 接口和 Navigator 接口上新增的一个 connection 属性组成的。
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.
例子
isSupported: false
isOnline: true
saveData: false
type: 'unknown'
Usage
js
import { useNetwork } from '@vueuse/core'
const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
console.log(isOnline.value)
import { useNetwork } from '@vueuse/core'
const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
console.log(isOnline.value)
To use as an object, wrap it with reactive()
js
import { reactive } from 'vue'
const network = reactive(useNetwork())
console.log(network.isOnline)
import { reactive } from 'vue'
const network = reactive(useNetwork())
console.log(network.isOnline)
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseNetwork v-slot="{ isOnline, type }">
Is Online: {{ isOnline }}
Type: {{ type }}
<UseNetwork>
<UseNetwork v-slot="{ isOnline, type }">
Is Online: {{ isOnline }}
Type: {{ type }}
<UseNetwork>
类型声明(Type Declarations)
显示类型声明
typescript
export type NetworkType =
| "bluetooth"
| "cellular"
| "ethernet"
| "none"
| "wifi"
| "wimax"
| "other"
| "unknown"
export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
export interface NetworkState {
isSupported: Ref<boolean>
/**
* If the user is currently connected.
*/
isOnline: Ref<boolean>
/**
* The time since the user was last connected.
*/
offlineAt: Ref<number | undefined>
/**
* At this time, if the user is offline and reconnects
*/
onlineAt: Ref<number | undefined>
/**
* The download speed in Mbps.
*/
downlink: Ref<number | undefined>
/**
* The max reachable download speed in Mbps.
*/
downlinkMax: Ref<number | undefined>
/**
* The detected effective speed type.
*/
effectiveType: Ref<NetworkEffectiveType | undefined>
/**
* The estimated effective round-trip time of the current connection.
*/
rtt: Ref<number | undefined>
/**
* If the user activated data saver mode.
*/
saveData: Ref<boolean | undefined>
/**
* The detected connection/network type.
*/
type: 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>
export type NetworkType =
| "bluetooth"
| "cellular"
| "ethernet"
| "none"
| "wifi"
| "wimax"
| "other"
| "unknown"
export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
export interface NetworkState {
isSupported: Ref<boolean>
/**
* If the user is currently connected.
*/
isOnline: Ref<boolean>
/**
* The time since the user was last connected.
*/
offlineAt: Ref<number | undefined>
/**
* At this time, if the user is offline and reconnects
*/
onlineAt: Ref<number | undefined>
/**
* The download speed in Mbps.
*/
downlink: Ref<number | undefined>
/**
* The max reachable download speed in Mbps.
*/
downlinkMax: Ref<number | undefined>
/**
* The detected effective speed type.
*/
effectiveType: Ref<NetworkEffectiveType | undefined>
/**
* The estimated effective round-trip time of the current connection.
*/
rtt: Ref<number | undefined>
/**
* If the user activated data saver mode.
*/
saveData: Ref<boolean | undefined>
/**
* The detected connection/network type.
*/
type: 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>