@vue-widget/hooks
Version:
hooks from react to vue
58 lines (57 loc) • 2.82 kB
JavaScript
import { __assign } from "tslib";
import qs from "qs";
import { useMemo } from "../useMemo";
import { useMemoizedFn } from "../useMemoizedFn";
import { ref } from "vue";
import isDev from "../utils/isDev";
import isBrowser from "../utils/isBrowser";
var _rins = null;
var baseParseConfig = {};
var baseStringifyConfig = {};
var w = typeof window !== "undefined" ? window : null;
var globalQuery = ref(getQuery());
function getQuery() {
return ((w === null || w === void 0 ? void 0 : w.location.search) || "").replace(/^\?/, "");
}
export var useUrlState = function (initialState, options) {
if (isDev && !isBrowser) {
console.error("useUrlState expected to used in browser");
}
var _a = options || {}, _b = _a.navigateMode, navigateMode = _b === void 0 ? "push" : _b, parseOptions = _a.parseOptions, stringifyOptions = _a.stringifyOptions;
var mergedParseOptions = __assign(__assign({}, baseParseConfig), parseOptions);
var mergedStringifyOptions = __assign(__assign({}, baseStringifyConfig), stringifyOptions);
var initialStateRef = ref(typeof initialState === "function"
? initialState()
: initialState || {});
var _route = _rins === null || _rins === void 0 ? void 0 : _rins.useRoute();
var _router = _rins === null || _rins === void 0 ? void 0 : _rins.useRouter();
var queryFromUrl = useMemo(function () {
var query = getQuery();
if (_rins)
query = qs.stringify(_route === null || _route === void 0 ? void 0 : _route.query, mergedStringifyOptions);
return qs.parse(query, mergedParseOptions);
}, [globalQuery, function () { return _route === null || _route === void 0 ? void 0 : _route.query; }]);
var targetQuery = useMemo(function () {
return __assign(__assign({}, initialStateRef.value), queryFromUrl.value);
}, [queryFromUrl]);
var setState = function (s) {
var newQuery = typeof s === "function" ? s(targetQuery.value) : s;
var urlObj = new URL((w === null || w === void 0 ? void 0 : w.location.href) || "");
var mergedParams = __assign(__assign({}, queryFromUrl.value), newQuery);
var queryString = qs.stringify(mergedParams, mergedStringifyOptions) || "";
urlObj.search = queryString;
globalQuery.value = queryString;
// 替换当前窗口的URL
if (_rins) {
_router[navigateMode === "replace" ? "replace" : "push"]({
path: _route.path,
query: mergedParams
});
}
else if (w) {
w.history[navigateMode === "replace" ? "replaceState" : "pushState"](w.history.state, document.title, urlObj.toString());
}
};
return [targetQuery, useMemoizedFn(setState)];
};
useUrlState.use = function (regist) { return (_rins = regist); };