Is there a way to detect localstorage changes and rerun boot file or reassign a value in vuejs or javascript?

Question

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?

does this answer help you? https://stackoverflow.com/questions/65216436/vuex-state-does-not-update-without-a-page-refresh/65216825#65216825 (this answer is using vuex but maybe it gives you a hint on the issue) — hamid niakan, Jan 19 '22 at 12:01
check out answers here https://stackoverflow.com/questions/42974170/is-there-any-way-to-watch-for-localstorage-in-vuejs — Romalex, Jan 19 '22 at 19:11
Thanks a lot @hamidniakan I'm honestly inspired by your comment. After I read up the post, I knew what to do. — aulia amirullah, Jan 20 '22 at 02:49
Thanks a bunch @Romalex I'm honestly inspired by your comment too. After I read up the article you posted, I knew what to do. — aulia amirullah, Jan 20 '22 at 02:50

aulia amirullah · Accepted Answer · 2022-01-20T02:51:36.013

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>

Is there a way to detect localstorage changes and rerun boot file or reassign a value in vuejs or javascript?

1 Answers1