@vue-widget/hooks/es/useMergedState/index.js

hooks from react to vue

import { toRaw, watchEffect, unref, watch, ref } from "vue";
export function useMergedState(defaultStateValue, option) {
    var _a = option || {}, defaultValue = _a.defaultValue, _b = _a.value, value = _b === void 0 ? ref() : _b;
    var initValue = typeof defaultStateValue === "function"
        ? defaultStateValue()
        : defaultStateValue;
    if (value.value !== undefined) {
        initValue = unref(value);
    }
    if (defaultValue !== undefined) {
        initValue =
            typeof defaultValue === "function"
                ? defaultValue()
                : defaultValue;
    }
    var innerValue = ref(initValue);
    var mergedValue = ref(initValue);
    watchEffect(function () {
        var val = value.value !== undefined ? value.value : innerValue.value;
        if (option === null || option === void 0 ? void 0 : option.postState) {
            val = option.postState(val);
        }
        mergedValue.value = val;
    });
    function triggerChange(newValue) {
        var preVal = mergedValue.value;
        innerValue.value = newValue;
        if (toRaw(mergedValue.value) !== newValue && (option === null || option === void 0 ? void 0 : option.onChange)) {
            option.onChange(newValue, preVal);
        }
    }
    // Effect of reset value to `undefined`
    watch(value, function () {
        innerValue.value = value.value;
    });
    return [mergedValue, triggerChange];
}