Vue Composition API for Automatic Fetch Data

vue-condition-watcher

Introduction

Vue Composition API for automatic fetch data when condition has been changed

This project is experimental.

Features

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

Todo

  • [ ] Add test for router
  • [ ] Support for vue 2.7

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) : 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 )

      • 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']})
      

Return Values

  • reactive : An object and returns a reactive proxy of conditions
  • data: Data resolved by config.fetcher
  • error: Error thrown by config.fetcher
  • loading: Request is loading
  • refresh: A function to re-fetch data

Download Details:

Author: runkids

Live Demo: https://github.com/runkids/vue-condition-watcher

GitHub: https://github.com/runkids/vue-condition-watcher

#vuejs #javascript #vue #vue-js

Vue Composition API for Automatic Fetch Data
10.85 GEEK