有没有办法检测本地存储更改并重新运行引导文件或在 vuejs 或 javascript 中重新分配一个值？

Question

我有 3 个域供用户在登录时选择。假设我有域 dev、demo 和 sandbox。我使用 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？

Answer 1

所以，我对上面的两个答案很有启发。我的启动文件不是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 };

然后，我导入了boot文件，实现了功能。这是更改后我的 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>

有没有办法检测本地存储更改并重新运行引导文件或在 vuejs 或 javascript 中重新分配一个值？

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

javascript

vue.js

local-storage

onchange