Question

我正在尝试在Nuxt中实现Shopify JS SDK

这就是我所做的，一个插件

// 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配置

//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无法读取未定义的属性“产品”

但是如果我删除了asyncData，刷新了我的页面，然后又重新添加了代码而不刷新，它就起作用了。

我相信这与生命周期有关。

任何人都可以告诉我我是否使用正确的方法，或者还有其他合适的方法来定义可在页面，组件等中使用的const

如果这是正确的方法，那我做错了什么？

谢谢。

我的参考是Nuxt指南以及示例。我在Google上试了一下，但找不到我需要的东西，或者我只是没有找到正确的关键字。

Answer 1

从DOCUMENTATION

Nuxt.js可让您创建将共享以下内容的环境变量客户端和服务器端。

为此，您可以使用env property：

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
})

Nuxt-一次定义一个const，并且可以在所有页面上使用

1 个答案:

从DOCUMENTATION