首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >是否有方法检测本地存储更改并重新运行引导文件或在vuejs或javascript中重新分配值?

是否有方法检测本地存储更改并重新运行引导文件或在vuejs或javascript中重新分配值?
EN

Stack Overflow用户
提问于 2022-01-19 11:41:14
回答 1查看 358关注 0票数 2

我有3个域,用户可以选择当他们登录。假设我有域开发、演示和沙箱。我使用Axios,其中在Boot.js文件中配置了域实例。只有在Vue实例仍未触发时才会触发引导文件。下面是引导文件:

代码语言:javascript
复制
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 }; 

以下是登录文件的脚本块:

代码语言:javascript
复制
<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?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-20 02:46:05

所以,我很受上面两个答案的启发。我的引导文件不是vuex文件,我没有办法做一个动作。相反,我创建了一个可以在选择和导出站点时调用的函数。下面是我实现的函数,用于更改引导文件中的变量。

代码语言:javascript
复制
let changeBasepath = (basepath) => {
    baseURL = basepath;
    api = axios.create({ baseURL: baseURL });
};

更改后的引导文件如下所示:

代码语言:javascript
复制
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 }; 

然后,我导入了引导文件并实现了这个函数。下面是修改后的vue文件的脚本块:

代码语言:javascript
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70769979

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档