javascript - Vue.js 使用方法合并 2 个文件

Question

我有一个 api，其中包含关于不同主题的路由，所以我想尽可能保持我的 api 调用干净。我尝试通过 1 个导入从 2 个不同的文件导入所有 vue 方法。

我尝试做但没有工作的如下；我创建了 2 个在 vue 方法中进行 api 调用的文件:categories.js 和 expenses.js，我创建了一个 index.js 文件，将这些文件一起导入。所以在我的主文件中，我导入了 index.js 文件，这样我就可以使用 expenses.js 和 categories.js 文件中的方法

我得到以下信息:TypeError: this.getCategories is not a function

类别.vue

import * as API from '@/api'

export default {
    mixins: [API],
    mounted(){
        this.getCategories()
    }
}

索引.js

import * as Categories  from './categories.js'
import * as Expenses    from './expenses.js'

export default {
    Categories,
    Expenses
}

类别.js

export default {
    methods: {
        getCategories(){
            this.$http.get('api.example.com')
                .then(response => {
                    //  response
                })
        }
    }
}

费用.js

export default {
    methods: {
        getExpenses(){
            this.$http.get('api.example.com')
                .then(response => {
                    //  response
                })
        }
    }
}

Answer 1

更改 index.js 以导出数组:

import Categories  from './categories.js'
import Expenses    from './expenses.js'

export default [
  Categories,
  Expenses
]

然后将类别组件更改为:

import API from '@/api'

export default {
  mixins: API, // [...API, others, more] if using more mixins.
  mounted(){
    this.getCategories()
  }
}