Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

195
Visualizações
Is there a way to detect localstorage changes and rerun boot file or reassign a value in vuejs or javascript?

I have 3 domains that users can choose when they log in. Let's say I have domains dev, demo, and sandbox. I use Axios in which the domain instance is configured in the Boot.js file. The boot file is only triggered when the Vue instance is still not fired. Here is the boot file:

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 }; 

Here is the script chunk of the login file:

<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>

The problem is the Local Storage is actually changed but the variable baseURL in the Boot.js file is not changed unless I reload the page. Is there possibly a way to reassign the variable baseURL whenever the local storage has changed?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

So, I'm quite inspired by the two answers above. My boot file is not a vuex file, there is no way for me to make an action. Instead, I made a function that can be called when a site is chosen and exported it. Here is the function I implemented to change the variable in my boot file.

let changeBasepath = (basepath) => {
    baseURL = basepath;
    api = axios.create({ baseURL: baseURL });
};

My boot file after the change looks like this:

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 }; 

Then, I imported the boot file and implemented the function. Here is the script chunk of my vue file looks like after the change:

<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>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda