Tengo 3 dominios que los usuarios pueden elegir cuando inician sesión. Digamos que tengo dominios dev, demo y sandbox . Uso Axios en el que la instancia de dominio está configurada en el archivo Boot.js. El archivo de arranque solo se activa cuando la instancia de Vue aún no se activa. Aquí está el archivo de arranque:
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 };Aquí está el fragmento de secuencia de comandos del archivo de inicio de sesión:
<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>El problema es que el almacenamiento local en realidad se cambia, pero la variable baseURL en el archivo Boot.js no se cambia a menos que vuelva a cargar la página. ¿Hay alguna forma de reasignar la variable baseURL cada vez que cambia el almacenamiento local?
Entonces, estoy bastante inspirado por las dos respuestas anteriores. Mi archivo de arranque no es un archivo vuex, no hay forma de que pueda realizar una acción. En cambio, hice una función que se puede llamar cuando se elige un sitio y lo exporté. Aquí está la función que implementé para cambiar la variable en mi archivo de arranque.
let changeBasepath = (basepath) => { baseURL = basepath; api = axios.create({ baseURL: baseURL }); };Mi archivo de arranque después del cambio se ve así:
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 };Luego, importé el archivo de arranque e implementé la función. Aquí está el fragmento de secuencia de comandos de mi archivo vue después del cambio:
<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>