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

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 插件吗？或者可能在服务器中手动添加 'Data' 集合并为每个文件添加新节点？

我已经测试了两者并探索了 graphQL API return 一个错误："Unexpected token < in JSON at position 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,
    }
  },

基本上我在我的页面目录中创建了一个数据文件夹，然后将文件放在他们的。然后你在脚本标签中 link 给他们，并用 return 函数调用他们。

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

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

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

How to use JSON/YAML file with Gridsome

javascript

vue.js

gridsome