Vue Composition API for automatic fetch data when condition has been changed
This project is experimental.
Auto fetch data when conditions changed.
Auto filtter falsy value in conditions.
Auto convert the corresponding type. (string, number, array, date)
Store the conditions within the URL hash every time a condition is changed
Sync the state with the query string and initialize off of that and that back/forward/refresh work.
Download example here](https://github.com/runkids/vue-condition-watcher/tree/master/examples) (Use Vite)
$ cd examples/
$ yarn
$ yarn dev
Simple example for vue-next
and vue-router-next
createApp({
template: `
<div class="filter">
<input v-model="conditions.name">
<button @click="refresh">Refresh</button>
</div>
<div class="container" v-if="!loading">
{{ data }}
</div>
<div class="loading" v-else>Loading...</div>
`,
setup() {
const config = {
fetcher: params => axios.get('/user/', {params}),
conditions: {
name: ''
},
}
return useConditionWatcher(config, {sync: 'router'})
},
})
.provide('router', router)
.use(router)
.mount(document.createElement('div'))
In your project
$ yarn add vue-condition-watcher
Or with npm
$ npm install vue-condition-watcher
CDN
https://unpkg.com/vue-condition-watcher/dist/index.js
const { conditions, data, error, loading, refresh } = useConditionWatcher(config, queryOptions)
config
: An object of config for vue-condition-watcher
fetcher
(Required) : A promise returning function to fetch data
conditions
(Required) : An object of conditions, also be initial value
defaultParams
: An object of fetcher’s default parameters
beforeFetch
: A function you can do before fetch data
const config = {
fetcher: params => axios.get('url', { params }),
defaultParams: {
type: 'member'
},
conditions: {
offset: 0,
limit: 10,
username: '',
tags: [],
created_at: new Date()
},
beforeFetch: conditions => {
// conditions is an object clone copy from config.conditions
conditions.created_at = dayjs(conditions.created_at, 'YYYY-MM-DD');
return conditions
}
}
queryOptions
: An object of options to sync query string with conditions
queryOptions
work base on vue-router, you need install vue-router first.
sync
: key of provide name ( String | Symbol )
import {createApp} from 'vue'
import App from './App.vue'
import { router } from './router'
const app = createApp(App)
.provide('router', router) // it's should be required
.use(router)
.mount('#app')
useConditionWatcher(config, {sync: 'router'})
ignore
: you can ignore key name from conditions, will not push with query.
useConditionWatcher(config, {sync: 'router', ignore: ['offset', 'limit']})
reactive
: An object and returns a reactive proxy of conditionsdata
: Data resolved by config.fetcher
error
: Error thrown by config.fetcher
loading
: Request is loadingrefresh
: A function to re-fetch dataAuthor: runkids
Live Demo: https://github.com/runkids/vue-condition-watcher
GitHub: https://github.com/runkids/vue-condition-watcher
#vuejs #javascript #vue #vue-js