Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

190
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!