Question

我有一个关于不同主题的路由的api，所以我想保持api调用的整洁。我尝试用1个导入从2个不同的文件导入所有vue方法。

我尝试做的但不起作用的内容如下：我创建了2个在vue方法中进行api调用的文件：category.js和expenses.js，并创建了将这些文件一起导入的index.js文件。因此，在我的主文件中，我导入了index.js文件，这样我就可以使用expenses.js和Categories.js文件中的方法了

我得到以下信息：TypeError：this.getCategories不是一个函数

categories.vue

import * as API from '@/api'

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

index.js

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

export default {
    Categories,
    Expenses
}

categories.js

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

expenses.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()
  }
}

Vue.js将2个文件与方法合并

1 个答案: