Question

假设我正在提供一个Web应用程序，而我的服务器正在将一个对象传递给前端，如下所示：

{
   user_name : "Robert",
   user_settings : {/*some settings object*/}
}

如果我想在main.js中访问这些信息，过去我只是在我的html文件中将这些信息全局化了。（例如）：

<html>

    <head>
      <title>Example Page</title>
    <!-- style links would go here -->
    </head>

    <body>

    <!-- script tags would go here -->

        <script>
           window.server_json = {
               user_name : "Robert",
               user_settings : {/*some settings object*/}
           }
        </script>
    </body>
</html>

这实际上似乎不适合我们用webpack和babel编写javascript的方式。我希望能够导出该对象并在其他文件中使用它，同时避免全局变量。

我不知道如何解决这个问题，但我认为它看起来像是：

（example.html的）

<html>

    <head>
      <title>Example Page</title>
    <!-- style links would go here -->
    </head>

    <body>

    <!-- script tags would go here -->

        <script>
           export default json = {
               user_name : "Robert",
               user_settings : {/*some settings object*/}
           }
        </script>
    </body>
</html>

（Main.js）

import json from "./Example.html";
//Do something with the data received from the server

在我目前的项目中，我正在使用webpack，babel和vue.js.我一直在寻找一些方法来做这几个小时，并希望得到任何帮助。

修改

为了澄清，数据将使用PHP和slim框架从服务器发送。它看起来像这样：

$app->get('my/page', function($request, $response){
    return $this->view->render($response, 'my_page.html', [
        "user_name" => "Robert",
        "user_settings" => [/*some settings object*/]
    ]);
});

Answer 1

您可以使用vue-resource插件从服务器请求数据。您可以使用Web Storage API缓存客户端上的数据。

导出从服务器传递到HTML的变量的最佳实践是什么，以便它们可以在javascript模块中使用？

1 个答案: