fix: responsive reactive #6213

This commit is contained in:
tangjinzhou 2023-01-27 16:54:13 +08:00
parent 9d5343ae9c
commit d211688059

View File

@ -1,6 +1,6 @@
import { computed } from 'vue';
import type { GlobalToken } from '../theme/interface';
import { useToken } from '../theme/internal';
import useMemo from './hooks/useMemo';
export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type BreakpointMap = Record<Breakpoint, string>;
@ -22,10 +22,9 @@ const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
export default function useResponsiveObserver() {
const [, token] = useToken();
const responsiveMap: BreakpointMap = getResponsiveMap(token.value);
// To avoid repeat create instance, we add `useMemo` here.
return useMemo(() => {
return computed(() => {
const responsiveMap: BreakpointMap = getResponsiveMap(token.value);
const subscribers = new Map<Number, SubscribeFunc>();
let subUid = -1;
let screens = {};
@ -82,5 +81,5 @@ export default function useResponsiveObserver() {
},
responsiveMap,
};
}, [token]);
});
}