Question

我是Vue的新手。我想从登录表单中读取employeeId并使其加载一些名为employeeId.json的json文件，例如（10000001.json，20000001.json）并将json对象设置为全局变量，这样我就可以轻松地在所有组件中访问它。

首先，我不知道如何动态加载json文件。使用import认为无效。建议使用require的人应该可以使用。但是没有很多示例，我不知道在哪里放置要求...

第二，在employeeId支持后，如何将json设置为global？我很困惑在哪里放置它（是否在导出默认值内部？是否在方法内部？或者是否在创建/安装的内部？）以及在何处使用它……

这是我的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
      }
    }
  }
}

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

1 个答案: