use-query-sync-data

A composition API that sync url query to data base on Vue3 with typescript.

Sync your url query to data when first time enter in to page and query change.

Installation

npm

npm install use-query-sync-data

yarn

yarn add use-query-sync-data

pnpm

pnpm install use-query-sync-data

Usage

Demo here.

In the SFC(.vue)

javascript example

1<script setup>
2import useQuerySyncData from 'use-query-sync-data';
3
4const opts = ['apple', 'banana', 'orange'];
5const langOpts = ['English', 'Chinese'];
6
7const defaultQueryData = {
8  inputValue: 'search',
9  selectValue: '',
10  checkboxGroupValue: ['opt1'],
11  person: {
12    name: 'Allen',
13    age: 30,
14    marriage: true,
15  },
16  pageIndex: 1,
17  switchValue: true,
18  radioValue: 'English',
19  nullValue: null,
20};
21
22const rules = {
23  inputValue: (val) => {
24    if (val) {
25      return true;
26    }
27
28    return false;
29  },
30  selectValue: (val) => {
31    if (opts.includes(val)) {
32      return true;
33    }
34
35    return false;
36  },
37
38  radioValue: (val) => {
39    if (langOpts.includes(val)) {
40      return true;
41    }
42
43    return false;
44  },
45};
46
47const queryChangeCallback = (newQueryData) => {
48  console.log('queryChangeCallback', newQueryData);
49};
50
51const initCallback = (newQueryData) => {
52  console.log('initCallback', newQueryData);
53};
54
55const mountedCallback = (newQueryData) => {
56  console.log('mountedCallback', newQueryData);
57};
58
59const {
60  updateQueryData,
61  queryData,
62} = useQuerySyncData({ useRoute, useRouter })(defaultQueryData, rules, {
63  queryChangeCallback,
64  initCallback,
65  mountedCallback
66});
67</script>

typescript example

1<script setup lang="ts">
2import useQuerySyncData from 'use-query-sync-data';
3import type { Rules } from 'use-query-sync-data';
4const opts = ['apple', 'banana', 'orange'];
5const langOpts = ['English', 'Chinese'];
6
7const defaultQueryData = {
8  inputValue: 'search',
9  selectValue: '',
10  checkboxGroupValue: ['opt1'],
11  person: {
12    name: 'Allen',
13    age: 30,
14    marriage: true,
15  },
16  pageIndex: 1,
17  switchValue: true,
18  radioValue: 'English',
19  nullValue: null,
20};
21
22type QueryData = typeof defaultQueryData;
23
24const rules: Rules<QueryData> = {
25  inputValue: (val) => {
26    if (val) {
27      return true;
28    }
29
30    return false;
31  },
32  selectValue: (val) => {
33    if (opts.includes(val)) {
34      return true;
35    }
36
37    return false;
38  },
39
40  radioValue: (val) => {
41    if (langOpts.includes(val)) {
42      return true;
43    }
44
45    return false;
46  },
47};
48
49const queryChangeCallback = (newQueryData: QueryData) => {
50  console.log('queryChangeCallback', newQueryData);
51};
52
53const initCallback = (newQueryData: QueryData) => {
54  console.log('initCallback', newQueryData);
55};
56
57const mountedCallback = (newQueryData: QueryData) => {
58  console.log('mountedCallback', newQueryData);
59};
60
61const {
62  updateQueryData,
63  queryData,
64} = useQuerySyncData({ useRoute, useRouter })(defaultQueryData, rules, {
65  queryChangeCallback,
66  initCallback,
67  mountedCallback
68});
69</script>

type useQuerySyncData

1declare const useQuerySyncData: (routerInstance: {
2  useRoute: () => RouteLocationNormalizedLoaded
3  useRouter: () => Router
4}) => <T extends Record<string, any>, K extends keyof T>(defaultQueryData: T, rules: Rules<T>, options?: {
5  queryChangeCallback?: ((queryData: T) => void) | undefined
6  initCallback?: ((queryData: T) => void) | undefined
7  mountedCallback?: ((queryData: T) => void) | undefined
8}) => {
9  queryData: globalThis.Ref<T>
10  updateQueryData: (val: UpdateQueryData<T>) => void
11};

Values return from useQuerySyncData

queryData

type: Ref<T> (T = what you pass into defaultQueryData)

default: {},

The latest data.

updateQueryData

type: Function

default: (object) => {},

pass the value you want to change. always update value by this method.

e.g. updateQueryData({ inputValue: 'grape', selectValue: 'apple' })

Arguments

There are two brackets here.

first bracket

It needs to pass the useRoute and useRouter from your own app in the first one, since the useRoute and useRouter get its own vue-router from it's build file which will get undefined.

sceond bracket

defaultQueryData(required)

type: Object

default: {}

Given a default value what your data have. It will be used for validate the properties type from the object. Additionally, the value will fallback to the default value when the query didnt' given, getting illegal value (validate by the rules result).

rules(required)

type: Object

default: {}

A Object that judging if value is legal. The properties of rules should match the defaultQueryData.

options(optional)

type: Object

default: {}

callbacks.

property	type	description
queryChangeCallback	((value) => void)	called when the query change, usually triggered when query change. it will be triggered after updateQueryData call as well.
initCallback	((value) => void)	called when first time query has been handle
mountedCallback	((value) => void)	called in the onMounted life cycle