我创建了vue混合函数,它返回项目的基本url。我需要这种混合的原因是因为在开发阶段,值将来自配置文件,而在生产阶段,它将来自全局变量window
。
可以从任何.vue
文件访问backEndHost
,但不能从vuex操作访问它。
Vue.mixin({
data: () => ({
get backEndHost() {
// ...
return (isDev) devAddr : prodAddr
}
})
})
Vuex操作声明:
const actions = {
getChallengesData({ commit, state }, task) {
// ...
axios.get(this.backEndHost() + url).catch((thrown) => {
swal('Error!', thrown.message, 'error')
}).then((res) => {
// ...
})
}
}
axios.get(this.backEndHost() + url)
触发了一个错误,说明this.backEndHost
未定义。
Vue warn:挂载钩子出错:"TypeError: this.backEndHost不是一个函数“
或者有什么变通方法可以达到同样的效果吗?
发布于 2018-11-22 15:10:33
我最终把backEndHost
放到了实用助手中(感谢@ittus)。因为我仍然需要backEndHost
在所有组件上都可用,所以我也把它放到了mixin中。
文件: helper.js
export function backEndHost() {
return (isDev) devAddr : prodAddr
}
文件: main.js
import { backEndHost } from '@/utility/helper'
Vue.mixin({
data: () => ({
backEndHost
})
})
文件: actions.js
import { backEndHost } from '@/utility/helper'
const actions = {
getChallengesData({ commit, state }, task) {
// ...
axios.get(backEndHost() + url).catch((thrown) => {
swal('Error!', thrown.message, 'error')
}).then((res) => {
// ...
})
}
}
https://stackoverflow.com/questions/53406556
复制相似问题