在vuex操作上访问vue混合
在vuex操作上访问vue混合
提问于 2018-11-21 14:43:46
我创建了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不是一个函数“
或者有什么变通方法可以达到同样的效果吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 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) => {
// ...
})
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53406556
复制相关文章
相似问题