Vue Axios Mixin 全局方法类型未定义

Vue Axios Mixin global method type undefined

我正在为一个全局 Vue 混合方法苦苦挣扎,我希望能够在每个组件中使用它,这样我就不必在所有这些组件中重复相同的方法。

AxiosMixin.js :

import axios from 'axios';
export default {
    methods: {
        getAllUsers (){
            axios.get('/user/')
            .then(response => {
                return response.data.resources
            })
            .catch(errors => {
                window.console.log(errors)
                return
              })
        }
    }
}

Main.js :

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import crytojs from 'crypto-js'
import vuetify from './plugins/vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import mixin from './AxiosMixin'

Vue.config.productionTip = false
Vue.mixin({
  methods: {
    getAllUsers: mixin.getAllUsers
  }
})

new Vue({
  router,
  store,
  axios,
  vuetify,
  crytojs,
  render: h => h(App)
}).$mount('#app')

在组件中:

  created () {        
        const users = this.getAllUsers();
        users.forEach((user) => {
            this.allUsers.push({
                userid: user.u_id, 
                userinfo: user.u_first_name+" "+user.u_last_name+" ("+user.u_telephone+")",
            });
        });
    }

但这不起作用。我收到错误消息:方法 "getAllUsers" 在组件定义中具有类型 "undefined"。您是否正确引用了函数?

我试图将 main.js 中的代码更改为:getAllUsers: () => mixin.getAllUsers() ,但这会导致错误:TypeError: _AxiosMixin__WEBPACK_IMPORTED_MODULE_12__.default.getAllUsers不是函数

我已经搜索了所有旧问题,但无法解决我的问题。我还阅读了文档:https://vuejs.org/v2/guide/mixins.html

如有任何帮助,我们将不胜感激!

问题出在

Vue.mixin({
  methods: {
    getAllUsers: mixin.getAllUsers
  }
})

getAllUsers: mixin.getAllUsers改成getAllUsers: mixin.methods.getAllUsers

但是你的 AxiosMixin.js 已经包含 Vue 期望格式的 mixin 对象,所以你可以用 Vue.mixin(mixin)

替换上面的所有代码

还有另一个问题 - 您的 getAllUsers 没有返回任何东西。 将 axios.get('/user/')... 更改为 return axios.get('/user/')... 以便您的函数返回一个承诺(用户)

然后像这样使用它:

created () {        
   this.getAllUsers().then(users => ...do something with users...)
}