Naivete Precedes Misrepresentation

    vue-fetch-data

    0.2.0 • Public • Published

    vue-fetch-data

    NPM version NPM downloads Build Status donate

    A simple and declarative way to fetch data for Vue components.

    Features

    • Small-size, only 800 bytes gzipped
    • Fetch and compose data in a declarative way

    Install

    yarn add vue-fetch-data

    Usage

    An example component which fetches a GitHub user:

    import Vue from 'vue'
    import FetchData from 'vue-fetch-data'
     
    Vue.use(FetchData)
    <template>
      <div>
        <div v-if="user.pending">Loading...</div>
        <div v-if="user.fulfilled">{{ user.value.login }}</div>
        <div v-if="user.rejected">{{ user.reason.message }}</div>
      </div>
    </template>
     
    <script>
      export default {
        props: ['username'],
        // make sure you set the initial value of that property to `{}`
        data: () => ({ user: {} }),
        fetch: {
          user: vm => `https://api.github.com/users/${vm.username}`
        }
      }
    </script>

    Then boom, check out live demo at https://vue-fetch-data.surge.sh

    fetch

    The fetch in component options is an Object which is similar to computed option.

    Examples

    The value of each entry can be string Object or a function which returns those. The returned Object could contain any axios option, the returned string will be used as url and fetched in GET method.

    export default {
      fetch: {
        user() {
          return `https://api.github.com/users/${this.username}`
        },
        article: 'https://get-article-api.com/api/get_post',
        users: {
          url: 'https://get-users/api/users',
          method: 'POST',
          data: {
            offset: 20
          }
        }
      }
    }

    poll

    Refetch in every poll ms:

    export default {
      fetch: {
        posts: vm => ({
          url: '/api/posts',
          poll: 1000, // update every second
          params: {
            limit: vm.limit,
            offset: vm.offset
          }
        })
      }
    }

    commit

    Instead of updating data in current component, you can use commit to commit a Vuex mutation:

    export default {
      computed: {
        ...mapState(['user'])
      },
      fetch: {
        user: {
          commit: 'UPDATE_USER',
          url: '/user/egoist'
        }
      }
    }

    And your vuex store would look like:

    {
      state: {
        user: {}
      },
      mutation: {
        UPDATE_USER(state, payload) {
          state.user = payload
        }
      }
    }

    this.$fetch

    You can also manually trigger it:

    export default {
      data: () => ({username: 'egoist', user: {}}),
      fetch: {
        user: vm => `/api/user/${vm.username}`
      }
      watch: {
        username() {
          this.$fetch('user')
        }
      }
    }

    this.$http

    Access axios directly, which means you can do this.$http.get/post and such in component.

    state and value

    It's just like Promise

    • pending: initial state, not fulfilled or rejected.
    • fulfilled: meaning that the operation completed successfully.
    • rejected: meaning that the operation failed.
    • value: the data which is fetched by the request
    • reason: the reason(Error) why the request failed

    Contributing

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Author

    vue-fetch-data © egoist, Released under the MIT License.
    Authored and maintained by egoist with help from contributors (list).

    egoistian.com · GitHub @egoist · Twitter @rem_rin_rin

    Keywords

    none

    Install

    npm i vue-fetch-data

    DownloadsWeekly Downloads

    7

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • rem