小编Sub*_*dli的帖子

使用 Gridsome 访问来自 Vue 组件的查询数据

我是 Gridsome 和 GraphQL 的新手。但是我没有在这个项目中使用 GraphQL。我只有一个 Gridsome 项目设置和一些 JSON 数据,我正在尝试全局定义它,以便我可以从我的所有 Vue 页面和组件访问它。(我知道它可以导入到组件中,但我正在寻找更多的“Gridsome 方式”来做到这一点)。我已经完成了以下步骤来实现这一目标:

1) 为 Json 文件创建一个文件夹:data/myJson.json. json文件:

{
    "startPage": {
        "title": "Welcher Typ bist Du?",
        "subtitle": "Los geht's beim lustigen Datev-Quiz!",
        "startButton": "Quiz starten"
    }
}
Run Code Online (Sandbox Code Playgroud)

2)我gridsome.server.js的看起来像这样:

var myJson = require('./data/questions.json');
module.exports = function (api) {
  api.loadSource(store => {
    const startPage = store.addContentType({
      typeName: 'StartPage'
    });

    startPage.addNode({
      title: 'StartPageInfo',
      fields: {
        title: myJson.startPage.title,
        subtitle: myJson.startPage.subtitle,
        startButton: myJson.startPage.startButton
      }
    })
  })
}
Run Code Online (Sandbox Code Playgroud)

3)我在index.vue页面中查询这些数据。

我可以在我的模板中访问这些数据。所以如果我做这样的事情 …

static-pages vue.js graphql gridsome

6
推荐指数
1
解决办法
1216
查看次数

标签 统计

graphql ×1

gridsome ×1

static-pages ×1

vue.js ×1