Nuxt - определить const один раз и использовать его на всех страницах

Question

Я пытаюсь внедрить Shopify JS SDK в Nuxt

Так вот что я сделал, плагин

// plugins/shopify.js
import Vue from 'vue'
import 'isomorphic-fetch'
import Shopify from 'shopify-buy'

export default ({ app }, inject) => {
  app.shopify = Shopify.buildClient({
    domain: 'aaa.myshopify.com',
    storefrontAccessToken: 'aaa'
    });
}

nuxt config

//nuxt.config.js
plugins : [{ src : '~/plugins/shopify', ssr: false}]
vendor : ['shopify-buy']

индекс

asyncData ({ app }) {
    return app.shopify.product.fetchAll().then((products) => {
        // Do something with the products
        console.log(products);
        return { products : products }
    });
}

Результат

TypeError Невозможно прочитать свойство 'product' из неопределенного

Но это работает, если я удалил asyncData, обновил страницу и добавил код без обновления.

Я считаю, что это как-то связано с жизненным циклом.

Может кто-нибудь сказать мне, правильно ли я это делаю, или есть другой правильный способ определить такое const, которое можно использовать на страницах, компонентах и ​​т. Д.

А если это правильный путь, что я сделал не так?

Заранее спасибо.

Мои ссылки - это руководства Nuxt, а также примеры. Я попробовал Google, но не могу найти то, что мне нужно, или, возможно, я просто не получил правильные ключевые слова.

Answer 1

ОТ ДОКУМЕНТАЦИЯ

Nuxt.js позволяет создавать переменные среды, которые будут использоваться совместно клиентская и серверная части.

Для этого вы можете использовать свойство env :

nuxt.config.js

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

Затем, чтобы получить к нему доступ из любого места, просто используйте его так: process.env.baseEnv

Например, в плагине axios:

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})