class Get {
constructor(entity) {
this.entity = entity;
this.query = []
}
addFilter(field, type, val) {
this.query.push(`filter=${field}||${type}||${val}`)
return this
}
addOrder(field, direction) {
this.query.push(`order=${field}||${direction}`)
return this
}
async send() {
const queryString = this.query.length ? '?params|' + this.query.join('&') : '';
return await console.log(this.entity + queryString)
// вместо console.log к примеру axios
}
}
const books = new Get('books').send()
// books
const audio = new Get('audio').addFilter('id', 'eq', 1).send()
//audio?params|filter=id||eq||1
const images = new Get('images').addFilter('name', 'like', 'cat').addOrder('createdAt', 'DESC').send()
// "images?params|filter=name||like||cat&order=createdAt||DESC"
backdrop-filter. Где не поддерживается, ничего страшного не случится. 
<div class="tab" @click="$router.push('/')">router-link. Там добавление класса уже реализовано, осталось только стили ему прописать. 
data: () => ({
map: {
activeMarkerIndex: null,
markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
...<ymap-marker
v-for="(n, i) in markers"
:icon="{
...map.markerIcon,
imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
}"
@mouseenter="map.activeMarkerIndex = i"
@mouseleave="map.activeMarkerIndex = null"
...<li
v-for="(n, i) in objects"
@mouseenter="map.activeMarkerIndex = i"
@mouseleave="map.activeMarkerIndex = null"
...
const Foo = ({ dispatch }) => {
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default connect()(Foo);const Foo = () => {
const dispatch = useDispatch();
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} />
);
};
export default Foo;const Foo = ({ value }) => {
return (
<Bar value={value} />
);
};
const mapStateToProps = state => ({
value: state.value,
});
export default connect(mapStateToProps)(Foo);const Foo = () => {
const value = useSelector(state => state.value);
return (
<Bar value={value} />
);
};
export default Foo;const valueSelector = state => state.value;
const Foo = () => {
const { dispatch, getState, subscribe } = useStore();
const value = valueSelector(getState());
useEffect(() => subscribe(console.log), []);
const handler = useCallback(() => {
dispatch(action());
}, []);
return (
<Bar onClick={handler} value={value} />
);
};
export default Foo;function shortNumber(val) {
const abs = Math.abs(val);
const prefixIndex = Math.log10(abs) / 3 | 0;
return (
(val < 0 ? '-' : '') +
Math.round(abs / (10 ** (prefixIndex * 3))) +
'KMGTPEZY'.charAt(~-prefixIndex)
);
}shortNumber(99) // '99'
shortNumber(1945) // '2K'
shortNumber(-5839465) // '-6M'
shortNumber(7e10) // '70G'
