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

【问题标题】：How to use JSON/YAML file with Gridsome如何在 Gridsome 中使用 JSON/YAML 文件
【发布时间】：2020-04-09 04:31:57
【问题描述】：

我想构建一个适用于 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 返回一个错误：“Unexpected token

谢谢

【问题讨论】：

标签： javascript vue.js gridsome

【解决方案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,
    }
  },

基本上，我在我的 pages 目录中创建了一个数据文件夹，然后将文件放在它们的目录中。然后在脚本标签中链接到它们并使用返回函数调用它们。

在你的模板标签中，你会做这样的事情：

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

【讨论】：