我有3个域,用户可以选择当他们登录。假设我有域开发、演示和沙箱。我使用Axios,其中在Boot.js文件中配置了域实例。只有在Vue实例仍未触发时才会触发引导文件。下面是引导文件:
import { boot } from "quasar/wrappers";
import axios from "axios";
import { LocalStorage } from "quasar";
import { Platform } from "quasar";
let baseURL = LocalStorage.getItem("basepath");
let api = axios.create({ baseURL: baseURL });
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios;
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api;
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
});
export { axios, api }; 以下是登录文件的脚本块:
<script>
import { LocalStorage } from "quasar";
export default {
data() {
return {
companyList: [{
id: "dev",
site: "https://dev.mycompany.com",
},
{
id: "demo",
site: "https://demo.mycompany.com",
},
{
id: "sandbox",
site: "https://sandbox.mycompany.com",
},
],
loginData: {
username: "",
password: "",
companyid: "",
},
};
},
methods: {
checkCompanyId(payload) {
let temp = this.companyList.find((o) => o.id == payload.toLowerCase());
if (temp) {
LocalStorage.set("basepath", temp.site); // <-- Here is the setting of the basepath
return true;
} else {
return false;
}
},
submitForm() {
const CompanyId = this.checkCompanyId(this.loginData.companyid);
if (CompanyId) {
this.loginProcess(this.loginData);
} else {
console.log('Company ID can't be found!')
}
}
},
}
}
</script>问题是本地存储实际上已被更改,但除非我重新加载页面,否则不会更改Boot.js文件中的变量baseURL。是否有一种方法可以在本地存储发生更改时重新分配变量baseURL?
发布于 2022-01-20 02:46:05
所以,我很受上面两个答案的启发。我的引导文件不是vuex文件,我没有办法做一个动作。相反,我创建了一个可以在选择和导出站点时调用的函数。下面是我实现的函数,用于更改引导文件中的变量。
let changeBasepath = (basepath) => {
baseURL = basepath;
api = axios.create({ baseURL: baseURL });
};更改后的引导文件如下所示:
import { boot } from "quasar/wrappers";
import axios from "axios";
import { LocalStorage } from "quasar";
import { Platform } from "quasar";
let baseURL = LocalStorage.getItem("basepath");
let api = axios.create({ baseURL: baseURL });
let changeBasepath = (basepath) => {
baseURL = basepath;
api = axios.create({ baseURL: baseURL });
};
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios;
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api;
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
});
export { axios, api, changeBasepath }; 然后,我导入了引导文件并实现了这个函数。下面是修改后的vue文件的脚本块:
<script>
import { LocalStorage } from "quasar";
import { changeBasepath } from "boot/api"; // <-- IMPORT IT
export default {
data() {
return {
companyList: [{
id: "dev",
site: "https://dev.mycompany.com",
},
{
id: "demo",
site: "https://demo.mycompany.com",
},
{
id: "sandbox",
site: "https://sandbox.mycompany.com",
},
],
loginData: {
username: "",
password: "",
companyid: "",
},
};
},
methods: {
checkCompanyId(payload) {
let temp = this.companyList.find((o) => o.id == payload.toLowerCase());
if (temp) {
LocalStorage.set("basepath", temp.site); // <-- Here is the setting of the basepath
changeBasepath(temp.site); // <-- IMPLEMENT IT
return true;
} else {
return false;
}
},
submitForm() {
const CompanyId = this.checkCompanyId(this.loginData.companyid);
if (CompanyId) {
this.loginProcess(this.loginData);
} else {
console.log('Company ID can't be found!')
}
}
},
}
}
</script>https://stackoverflow.com/questions/70769979
复制相似问题