Vue Chimera
made with React

Vue Chimera是一个基于Vue.js的反应性RESTful API库，是http客户端，并具有防反跳功能。

安装

Npm

npm i vue-chimera

Yarn

yarn add vue-chimera

浏览器中使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/vue-chimera@latest/dist/vue-chimera.min.js"></script>
<script>
Vue.use(VueChimera)
</script>

使用

引入并注册

import Vue from 'vue'
import VueChimera from "vue-chimera"

Vue.use(VueChimera, {
   // Chimera default options
})

Nuxt.js中使用

// nuxt.config.js
module.exports = {
    modules: [
        'vue-chimera/nuxt'
    ],
    chimera: {
       axios: axios.create(),

       // Integrate with @nuxt/axios
       axios () {
          return this.$axios
       }
    }
}

基本用法

安装之后，通过chimera这个特别的选项使用，下例是显示文章列表: https://jsonplaceholder.typicode.com/posts

<template>
    <div>

        <!-- `posts.loading` 检查是否加载完成的标志-->
        <span v-if="posts.loading">Loading...</span>

        <!--`posts.data` 返回最终的数据 -->
        <ul v-if="posts.data">
            <li v-for="post in posts.data">{{ post.title }}</li>
        </ul>

        <!-- `posts.error` 返回错误 -->
        <span v-if="posts.error">{{ posts.error.message }}</span>
    </div>
</template>

<script>
// sample-component.vue
export default {
    chimera: {
        // 如果是GET方式，只需简单的设置url
        posts: 'https://jsonplaceholder.typicode.com/posts'
    }
}
</script>