description

It is only applicable to vue3. It is intended to simplify the operation of URL through hooks.

install

npm i @gxs/use-query -S

Usage

First, need to register in the root component

// main.ts
import { createApp } from "vue"
import App from "./setup/App.vue";
import { VueQueryPlugin } from "@gxs/use-query";

createApp(App).use(router).use(VueQueryPlugin).mount("#app");

Used in subcomponents. Suppose the access URL: http://localhost:3000?a=10&b=20

<script>
import { useQuery } from "@gxs/use-query";

// 一，Get parameters through hook
//query: { a: 10, b: 20 }
const [query1,setQuery4] = useQuery() 


// 二，Gets the specified parameter
const [query2,setQuery4] = useQuery("a")
const [query3,setQuery4] = useQuery(["a", "b"])


// 三，Specify default values  query3: { z: 50 }
const [query3,setQuery4] = useQuery("z", 50)


// 四，Re query using setquery
const [_, setQuery4] = useQuery()

setQuery4({}) //http://localhost:3000
setQuery4("a", 20) //http://localhost:3000?a=20
setQuery4({b: 10}) //http://localhost:3000?b=10
</script>