vue-condition-watcher
🕶
Introduction
Vue Composition API for automatic fetch data when condition has been changed
Features
Vue2 @vue/composition-api
$ cd examples/vue3
$ yarn
$ yarn serve
$ cd examples/vue2
$ yarn
$ yarn serve
👉
Online demo with vue-infinite-scroll
export default {
directives: { infiniteScroll },
setup() {
const items = ref([])
const config = {
fetcher: api.addBox,
conditions: {
offset: 0,
limit: 10
},
afterFetch(data) {
if (!data) return
items.value = items.value.concat(data)
}
}
const { conditions, loading } = useConditionWatcher(config)
const loadMore = () => {
if (loading.value) return
conditions.offset += conditions.limit
}
return {
conditions,
loading,
items,
loadMore
}
}
}
Quick Start
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'))
Usage
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
API
const { conditions, data, error, loading, refresh } = useConditionWatcher(config, queryOptions)
Parameters
config: An object of config for vue-condition-watcher-
fetcher(⚠️ Required) : Can be any asynchronous 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 Parameters -
afterFetch: A function you can do after fetch data. Parameters: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 }, afterFetch(data) { console.log(data) } }
-
queryOptions: An object of options to sync query string with conditions-
⚠️ queryOptionswork base on vue-router, you need install vue-router first. -
sync: key of provide name ( String | Symbol )- main.js: register router
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')
- then
useConditionWatcher(config, {sync: 'router'})
-
ignore: you can ignore key name from conditions, will not push with query.useConditionWatcher(config, {sync: 'router', ignore: ['offset', 'limit']})
How to use in vue@2 with @vue/composition-api
- ( Good ) Add
provideinmain.jsnew Vue({ el: '#app', router, store, provide: { router }, render: h => h(App) })
- Add
providein current fileimport { useConditionWatcher } from "vue-condition-watcher"; import { provide } from "@vue/composition-api"; import router from "@/router"; import api from "../api"; export default { setup() { provide("router", router); const config = { fetcher: api.users, conditions: { offset: 0, limit: 9 } }; return useConditionWatcher(config, {sync: 'router', ignore: ['offset', 'limit']}); } };
- ( Good ) Add
-
Return Values
reactive: An object and returns a reactive proxy of conditionsdata: Data resolved byconfig.fetchererror: Error thrown byconfig.fetcherloading: Request is loadingrefresh: A function to re-fetch data
26 Nov 1, 2022
44 Jan 2, 2023
26 Jul 7, 2022
268 Dec 26, 2022
9.5k Dec 30, 2022
96 Dec 23, 2022
110 Nov 12, 2022
89 Nov 26, 2022
792 Dec 30, 2022
6 Jan 2, 2022
420 Nov 24, 2022
0 Aug 17, 2021
28 Dec 12, 2022
758 Dec 26, 2022
164 Dec 28, 2022
180 Dec 22, 2022
122 Jan 3, 2023
4 Nov 8, 2022