在vue中使用继承&依赖注入

怎么让vue代码越来越少？

接下的话是一个后端工程师站在后端的角度看前端所产生的思考，本身的前端眼界有限，还请前端大佬赐教。
作为输出靠cv，解决问题靠百度的程序员的我，在粘贴复制了无数次的vue页面代码后，慢慢的懒意占据了上风，我逐渐思考怎么样来减少代码量。

1. 继承&依赖注入

剔除页面，单讲js代码，从我们日常工作面对的最多的分页需求来说，基本上传统web应用中总会有那么十几组的分页，而且这些分页的代码逻辑都用烂了。所以如果我们实现一个父类默认帮我们自动做了这些事情，是不是就能减少很大一部分工作量。刚好通过查询vue文档发现他是支持继承的通过extemds继承Parent.vue页面，这样子页面就会拥有父页面的所有的属性和方法了。
接下来遇到了一个问题，父页面在mouted的时候去访问接口，这个时候的api是来不及变化的所以我门应该想个办法，把子类的api注入到父类中，委托父类用我们自己的api去请求，vue中有一对provide/inject 刚好是做这件事的，所以问题解决，现在能够实现的效果是，一个只有api对象的空白的子类页面继承了一个实际做事情的父类页面，把程序的依赖反转了过来。

抛个问题，我按照上面的方式实现后，总会报这个错误，所有地方都是正常的，api是我注入进去的属性，有了解的大佬麻烦告知我，谢谢了。

代码

最后上代码，只放父类和子类的数据部分，这个例子中
父类：

<script>
    import Pager from "./Pager";

    export default {
        name: "AutoLoadPager",
        extends: Pager,
        provide: function () {
            return {
                api: Object
            }
        },
        data() {
            return {}
        },
        mounted() {
            this.api.list().then(res => {
                this.items = res.data
                console.log("查询结果", this.items)
            })


        }
    }
</script>

子类：

<script>
    import draggable from 'vuedraggable'
    import StoryItem from "../../components/StoryItem";
    import AudoLoadPager from "../../components/AutoLoadPager";

    export default {
        name: "Story",
        extends: AudoLoadPager,
        inject: ['api'],
        components: {draggable, StoryItem},
        data() {
            return {
                api: this.$api.story
            }
        },
        methods: {},
        mounted() {
        }
    }
</script>

核心就两点provide/inject

2.构造器

作为传统的CURD项目，一个模块就有一组rest请求，他们之间都是有一定的规范的，所以我们可以写一个生成一组rest接口的方法，为每一个模块添加基础的rest接口,然后调用。

http.generalApi = function (odd, plural) {
    return {
        list: function (params) {
            return http.get(plural, {params: params})
        },
        delete: function (id) {
            return http.delete(odd + '/' + id)
        },
        get: function (id) {
            return http.get(odd + '/' + id)
        },
        save: function (domain) {
            return http.post(odd, domain)
        },
        update: function (domain) {
            return http.put(odd + '/' + domain.id, domain)
        }
    }
}

3.第三方库

对于一些基本的工具方法lodash库就足够能够胜任了。。。未完待续