Невозможно использовать ключ API в качестве переменной env с библиотекой Butter CMS внутри asyncData ()

Question

Я недавно преобразовал мой сайт из Drupal в Vue, и в настоящее время он работает как обычное приложение Vue. По SEO (и по другим причинам) я работаю над преобразованием его для использования Nuxt, и у меня возникают проблемы с выяснением, как установить закрытый ключ API в качестве переменной среды и использовать его в компоненте с библиотекой Butter и asyncData () . Используя Butter docs для Vue , у меня все работает нормально в SPA, но я не могу заставить то же самое работать в Nuxt.

В моем SPA я просто добавил API_KEY к dev.env.js, а затем у меня есть эти две строки в buttercms.js:

import Butter from 'buttercms'
export const butter = Butter(process.env.API_KEY)

и затем в моем компоненте:

<script>
import { butter } from "@/buttercms";
...
methods: {
  getPost() {
  butter.post.retrieve(this.$route.params.slug)
    .then(res => {
       this.post = res.data;
    })
    .catch(res => {
      console.log(res);
    });
  }
},

, который работает нормально. В Nuxt я установил свой ключ API в nuxt.config.js примерно так:

env: {
  API_KEY: process.env.API_KEY || '1234567890'
},

то же содержимое для buttercms.js, как указано выше, а затем в моем компоненте:

<script>
import { butter } from "buttercms";
export default {
  asyncData(context) {
    return butter.page
      .retrieve("static_page", "about-smga")
      .then(res => {
        console.log(res.data.data);
        return {
          page: res.data.data
        };
      })
      .catch(res => {
        console.log(res);
      });
  },
...
</script>

Однако, когда я запускаю его, я получаю сообщение об ошибке Cannot read property 'page' of undefined, которое говорит мне, что библиотека Butter не используется. Очевидно, я делаю что-то не так, но я не уверен, что. Что мне нужно изменить, чтобы использовать butter в моем asyncData() звонке?

Answer 1

Вы импортируете класс масла из модуля buttercms в своем компоненте. Но это не инициализировано. Вы можете поместить свою инициализацию в plugins / buttercms.js и добавить ее в nuxt.config в раздел плагинов.

import Butter from 'buttercms'

export default (ctx, inject) => {
  inject('butter', Butter(process.env.API_KEY))
}

И затем вы можете ссылаться на инициализированный экземпляр с помощью этого. $ Butter в ваших компонентах