Javascript 在应用程序启动之前加载json文件，并将其保存在全局变量mithrilJs中

我想在我的mithrilJs应用程序启动之前加载一个JSON文件，并想将此数据保存在某个全局变量中（JSON文件用于mithril应用程序的某些运行时配置，就像Angular中的app_初始化器一样） 到目前为止，我已经在我的应用程序中做到了这一点

import m from 'mithril';
import { a } from './MainView';

var Data = {


    fetch: function() {
        m.request({
            method: "GET",
            url: "./client/config/config.json",
        })
            .then(function(items) {
                console.log(items)
                 // want to store this
                m.route(document.body, "/accounts", a)

            })
    }

}
Data.fetch()

我的主视图文件包含

 import m from 'mithril';

 import {Layout} from "./components/layout";
 import {Accounts} from "./components/accounts";
 import {AccountNew} from './components/newAccount';
 export const a={
    "/accounts": {
        render: function (vnode) {

            return m(Layout, m(Accounts))
        }
    },
    "/accountsNew": {
        render: function (vnode) {
            return m(Layout, m(AccountNew))
        }
    },
}

---

那么，对于这一点，还有什么更好的方法呢？我想将获取的json文件数据（项）存储在一些全局变量中，比如react中的props或angular中的services，我如何做到这一点来访问我的应用程序中的任何地方？尝试将其保存在sessionStorage中，并在每次重新加载后检查它

import m from 'mithril';
import { a } from './MainView';

var Data = {


    fetch: function() {
        m.request({
            method: "GET",
            url: "./client/config/config.json",
        })
            .then(function(items) {
                console.log(items)
                 // want to store this
                m.route(document.body, "/accounts", a)

            })
    }

}
Data.fetch()

if(!sessionStorage.key('myJson'))
     sessionStorage.setItem('myJson','myJson')

---

这些文档说明您可以使用onmatch预加载数据，下面是它们示例的粗略翻译：

var state = {
    items: null,
    loadItems: function() {
        if (state.items === null) {
            return m.request("./client/config/config.json").then(function(items) {
                state.items = items;
            });
        }
    }
};

const a = {
    "/accounts": {
        onmatch: state.loadItems,
        render: function (vnode) {
            return m(Layout, m(Accounts))
        }
    },
    "/accountsNew": {
        onmatch: state.loadItems,
        render: function (vnode) {
            return m(Layout, m(AccountNew))
        }
    },
}

您可以在此处的文档中阅读他们的两个示例：

替代解决方案

这些解决方案实际上并不涉及mithril，因为您的应用程序实际上是在使用mithril之前加载数据。您应该能够将状态变量作为属性传递到组件中，即返回m（Layout，m（Accounts，{state}））

将JSON字符串转储到服务器端模板中

如果您也控制服务器端，那么您可以通过输出分配给基础模板中javascript变量的转义JSON字符串，直接将配置转储到全局变量中。我这样做是为了转储模型信息或会话信息，以便客户端代码可以使用它

var config=${EscapedJSonStringsServerVariable}；

直接导入配置

如果您重写config.json以将配置作为对象导出，也可以直接将配置导入应用程序

从./client/Config/Config.js导入{Config}

直接呼叫

m.request

最后，您还可以将从

m.request

返回的承诺分配给var，并在

loadItems

中返回该承诺。这将立即触发m.request，但在承诺得到解决之前，将阻止加载模板

var state = (function () {
    var configRequest = m.request({
        url: "./client/config/config.json"
    }).then(function(items) {
        state.items = items;
    });
    return {
        items: null,
        loadItems: function() {
            return configRequest;
        }
    };
})();

---

我不想使用session或local storage@VladimirCan我把它存储在全局变量中，这样它就可以在任何地方都可以访问。我不想在组件初始化时使用它，我想在应用程序启动之前加载它@IanI添加了一些替代解决方案，但这实际上取决于应用程序的体系结构。特别是因为您希望在使用mithril路由器之前加载它。我创建了一个singleton类，并将配置存储在@Ian