如何从文件中加载json并在Vue中将其设置为全局变量？

我是Vue的新手。我想从登录表单中读取

employeeId

，并使用它加载一些类似employeeId.json（10000001.json，2000001.json）的json文件，并将json对象设置为全局变量，以便在所有组件中轻松访问它

首先，我不知道如何动态加载json文件。使用

import

会发现无效。有人建议使用

require

应该可以。但是没有太多的例子，我不知道放在哪里

其次，如何在employeeId道具插入后将json设置为全局？我很困惑应该把它放在哪里（是否在导出默认值内？是否在方法内？是否在创建/装载的内部？），以及在哪里使用它或不使用它

这是我的headerNav.vue文件的脚本部分

<script>
//**I placed them here now, it works, but employeeId is hard coded...
import json10000001 from "./json/10000001.json";
import json20000001 from "./json/20000001.json";
import json30000001 from "./json/30000001.json";
// var employeeId = employeeIdFromLogin;
var jsonForGlobal;
var employeeId = 10000001;
var jsonFileCurrentObj;
if (employeeId == "10000001") {
  jsonForGlobal = jsonFileCurrentObj = json10000001;
} else if (employeeId == "20000001") {
  jsonForGlobal = jsonFileCurrentObj = json20000001;
} else if (employeeId == "30000001") {
  jsonForGlobal = jsonFileCurrentObj = json30000001;
}

export default {
  // props:{
  //   employeeIdFromLogin: String,
  // },
  props:['employeeIdFromLogin'],
  jsonForGlobal,
  // employeeIdFromLogin,
  data() {
    return {
      docked: false,
      open: false,
      position: "left",
      userinfo: {},
      jsonFileCurrent: jsonFileCurrentObj,
      // employeeIdFromLogin: this.GLOBAL3.employeeIdFromLogin
      // jsonFile: currentJsonFile
    };
  },
  mounted() {
//**I tried put it here, not working well...
    // var employeeId = this.employeeIdFromLogin;
    // // var jsonForGlobal;
    // console.log("headernav.employeeIdFromLogin="+this.employeeIdFromLogin);
    // // var employeeId = 10000001;
    // var jsonFileCurrentObj;
    // if (employeeId == "10000001") {
    //   this.jsonForGlobal = this.jsonFileCurrentObj = json10000001;
    // } else if (employeeId == "20000001") {
    //   this.jsonForGlobal = this.jsonFileCurrentObj = json20000001;
    // } else if (employeeId == "30000001") {
    //   this.jsonForGlobal = this.jsonFileCurrentObj = json30000001;
    // }
  },
  methods: {
    switchPage(pageName) {
      this.$emit("switchPage", pageName);
    }
//**I don't know how to use the require...
    // var employeeId = 10000001;
    // getJsonFile(employeeId) {
    //   this.currentJsonFile = require("../assets/json/" + employeeId + ".json");
    // }
  }
};

//**我现在把它们放在这里，它可以工作，但employeeId是硬编码的。。。
从“/json/10000001.json”导入json10000001；
从“/json/2000001.json”导入JSON2000001；
从“/json/30000001.json”导入json30000001；
//var employeeId=employeeIdFromLogin；
var jsonForGlobal；
var employeeId=10000001；
var jsonFileCurrentObj；
如果（employeeId==“10000001”）{
jsonForGlobal=jsonFileCurrentObj=json10000001；
}否则如果（employeeId==“2000001”）{
jsonForGlobal=jsonFileCurrentObj=JSON2000001；
}否则如果（employeeId==“3000001”）{
jsonForGlobal=jsonFileCurrentObj=JSON3000001；
}
导出默认值{
//道具：{
//employeeIdFromLogin:String，
// },
道具：['employeeIdFromLogin']，
jsonForGlobal，
//EmployeedFromLogin，
数据（）{
返回{
停靠：错误，
开：错，
位置：“左”，
用户信息：{}，
jsonFileCurrentObj，
//employeeIdFromLogin:this.GLOBAL3.employeeIdFromLogin
//jsonFile:currentJsonFile
};
},
安装的（）{
//**我试着把它放在这里，但效果不好。。。
//var employeeId=this.employeeIdFromLogin；
////var jsonForGlobal；
//console.log（“headernav.employeeIdFromLogin=“+this.employeeIdFromLogin”）；
////var employeeId=10000001；
//var jsonFileCurrentObj；
//如果（employeeId==“10000001”）{
//this.jsonForGlobal=this.jsonFileCurrentObj=json10000001；
//}否则如果（employeeId==“2000001”）{
//this.jsonForGlobal=this.jsonFileCurrentObj=json2000001；
//}否则如果（employeeId==“3000001”）{
//this.jsonForGlobal=this.jsonFileCurrentObj=json3000001；
// }
},
方法：{
切换页面（页面名称）{
此.$emit（“切换页面”，页面名称）；
}
//**我不知道如何使用这个命令。。。
//var employeeId=10000001；
//getJsonFile（雇员ID）{
//this.currentJsonFile=require（“../assets/json/”+employeeId+”.json”）；
// }
}
};

您可能希望使用vuex管理全局存储。但是，如果您不希望包含Vuex，有一种更简单的方法可以获得全局状态：

定义globalStore.js

// globalStore.js
export const globalStore = new Vue({
  data: {
    jsonForGlobal: null
  }
})

然后导入它并在组件中使用：

import {globalStore} from './globalStore.js'
export default {
  props: ['employeeIdFromLogin'],
  data: function () 
    return {
      jsonLocal: globalStore.jsonForGlobal,
      jsonFileCurrent: null
    }
  },
  watch: {
    employeeIdFromLogin: {
      handler(newVal, oldVal) {
        const data = require('./json/' + this.employeeIdFromLogin + '.json')
        this.jsonFileCurrent = data
        globalStore.jsonForGlobal = data
      }
    }
  }
}

---

您可能希望使用vuex来管理全局存储。但是，如果您不希望包含Vuex，有一种更简单的方法可以获得全局状态：

定义globalStore.js

// globalStore.js
export const globalStore = new Vue({
  data: {
    jsonForGlobal: null
  }
})

然后导入它并在组件中使用：

import {globalStore} from './globalStore.js'
export default {
  props: ['employeeIdFromLogin'],
  data: function () 
    return {
      jsonLocal: globalStore.jsonForGlobal,
      jsonFileCurrent: null
    }
  },
  watch: {
    employeeIdFromLogin: {
      handler(newVal, oldVal) {
        const data = require('./json/' + this.employeeIdFromLogin + '.json')
        this.jsonFileCurrent = data
        globalStore.jsonForGlobal = data
      }
    }
  }
}

---

谢谢你，我正在努力。。。现在它显示了一个错误，可能headerNav.vue甚至在登录页面上也加载了（不应该加载）。。。我正在检查vue路由器以修复…``TypeError:无法在Proxy.render上读取null的属性“employeeName”（eval at./node_modules/vue loader/lib/template compiler/index.js…``嗨，我仍然在努力使用这个…仍然没有成功。我有点困惑，这是不是应该放在每个组件中？以及应该放在login.vue中的内容？…谢谢你，我正在尝试…现在它显示了一个错误，可能headerNav.vue甚至在登录页上也被加载了e（不应该是）…我正在检查vue路由器以修复…``TypeError:无法读取Proxy.render处null的属性'employeeName'（在./node_modules/vue loader/lib/template compiler/index.js处进行评估…``嗨，我仍然在努力使用这个…仍然没有成功。我有点困惑，这应该放在每个组件中吗？登录.vue中应该放什么？。。。