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

Question

我对Vue是新来的。我想从一个登录表单中读取employeeID，并通过它加载一些按employeeID.json命名的json文件，比如(10000001.json，20000001.json)，并将json对象设置为全局变量，以便在所有组件中轻松地访问它。

首先，我不知道如何动态加载json文件。使用import不起作用。有人建议使用require应该可以。但例子不多，不知道该把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");
    // }
  }
};

Answer 1

您可能希望使用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
      }
    }
  }
}