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...)
}
我正在为一个全局 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...)
}