Question

我想构建一个可处理json或YAML文件的网格应用程序。

我想从Vue组件获取位于“ ./data/”文件夹中的文件的值，并保留graphQL数据层。换句话说，在文件中显示graphQL数据。

profile.json

{
    "name": "Lorem"
}

config.json

{
    "layout": "default",
    "theme": "blue"
}

我想以这种方式访问名称值：

$page.data.profile.name
$page.data.config.theme

或

$data.profile.name
$data.config.theme

我要处理@ gridsome / source-filesystem和@ gridsome / transformer-json插件吗？还是在服务器中手动添加“数据”集合并为每个文件添加新节点？

我都进行了测试，并且探索graphQL API返回错误：“ JSON位置0的意外令牌<”

谢谢

Answer 1

如果您有本地文件，则可以通过以下方式添加它们：

import temperatures from '~/data/four.json'
import east from '~/data/east.json'
import southwest from '~/data/southwest.json'
import whd from '~/data/whd.json'
import thirteen from '~/data/thirteen.json'

export default {
  data () {
    return {
      temperatures,
      east,
      thirteen,
      whd,
      southwest,
    }
  },

基本上，我在页面目录中创建了一个数据文件夹，然后将文件放入其中。然后，您可以在script标签中链接到它们，并使用return函数来调用它们。

在模板标签中，您将执行以下操作：

<template>
<div>
 {{ temperatures }}
</div>
</template>

如何在Gridsome中使用JSON / YAML文件

1 个答案: