Accessing vue mixin on vuex action - vue.js

Question

I created vue mixin function that return the base url of the project. The reason I needed this mixin is because on the dev stage the value will come from configuration file, and on production stage it'll come from global variable window.
The backEndHost is accessible from any .vue file, but it's not accessible from vuex action.
Vue mixin declaration:
Vue.mixin({
data: () => ({
get backEndHost() {
// ...
return (isDev) devAddr : prodAddr
}
})
})
Vuex actions declaration:
const actions = {
getChallengesData({ commit, state }, task) {
// ...
axios.get(this.backEndHost() + url).catch((thrown) => {
swal('Error!', thrown.message, 'error')
}).then((res) => {
// ...
})
}
}
The axios.get(this.backEndHost() + url) triggered an error, saying that this.backEndHost is undefined.
[Vue warn]: Error in mounted hook: "TypeError: this.backEndHost is not a function"
Any idea how to resolve this error? or is there any workaround to achieve the same result?

Answer 1

I ended up putting the backEndHost into utility helper (thanks to #ittus). Since I still need the backEndHost to be available on all components, I also put it into mixin.
File: helper.js
export function backEndHost() {
return (isDev) devAddr : prodAddr
}
File: main.js
import { backEndHost } from '#/utility/helper'
Vue.mixin({
data: () => ({
backEndHost
})
})
File: 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) => {
// ...
})
}
}