Question

我正在努力在每个组件中使用全局Vue mixin方法，这样我就不必在所有这些组件中重复相同的方法。

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”在组件定义中具有“未定义”类型。您是否正确引用了该功能？

我试图将main.js中的代码更改为：getAllUsers：（）=> mixin.getAllUsers（），但这导致错误：TypeError：_AxiosMixin__WEBPACK_IMPORTED_MODULE_12 __。default.getAllUsers不是函数

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

任何帮助将不胜感激！

Answer 1

存在问题

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

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

1 个答案: