javascript - Shopify 的 vue.js 应用程序中的变量保持为空

Question

我正在为 Shopify 的 JavaScript Buy SDK 构建一个 vue.js 应用程序，但我遇到了一个变量未更新的问题。

基本上，shopClient 变量已更新，但 shopCart 由于某种原因保持为 null。

var vueApp = new Vue({
    el: '#shopify-app',
    created: function() {
        this.setupShopAndCart();
    },
    data: {
        shopCart: null,
        shopClient: null,
    },
    methods: {
        setupShopAndCart: function() {
            this.shopClient = ShopifyBuy.buildClient({
                apiKey: 'xxx',
                domain: 'xxx.myshopify.com',
                appId: '6'
            });
            if(localStorage.getItem('lastCartId')) {
              this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(function(remoteCart) {
                this.shopCart = remoteCart;
                cartLineItemCount = this.shopCart.lineItems.length;
                console.log(this.shopCart.checkoutUrl);
                console.log("fetching");
              });
            } else {
              this.shopClient.createCart().then(function (newCart) {
                this.shopCart = newCart;
                localStorage.setItem('lastCartId', this.shopCart.id);
                cartLineItemCount = 0;
                console.log(this.shopCart.checkoutUrl);
                console.log("failing");
              });
            }
        }, //setupShop end
    }
});

Answer 1

您在范围界定方面遇到问题。 Promise 中的 this 不是 vue 实例。

试试这个

var vueApp = new Vue({
    el: '#shopify-app',
    created: function() {
        this.setupShopAndCart();
    },
    data: {
        shopCart: null,
        shopClient: null,
    },
    methods: {
        setupShopAndCart: function() {
            var self = this;
            this.shopClient = ShopifyBuy.buildClient(
                {
                    apiKey: 'xxx',
                    domain: 'xxx.myshopify.com',
                    appId: '6'
                }
            );
            if(localStorage.getItem('lastCartId')) {
                this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(
                    function(remoteCart) {
                        self.shopCart = remoteCart;
                        cartLineItemCount = self.shopCart.lineItems.length;
                        console.log(self.shopCart.checkoutUrl);
                        console.log("fetching");
                    }
                );
            } else {
                this.shopClient.createCart().then(
                    function (newCart) {
                        self.shopCart = newCart;
                        localStorage.setItem('lastCartId', self.shopCart.id);
                        cartLineItemCount = 0;
                        console.log(self.shopCart.checkoutUrl);
                        console.log("failing");
                    }
                );
            }
        }, //setupShop end
    }
});

它将本地 vue 实例存储在 self 变量中，该变量可供 Promise 访问，允许您设置 shopCart 变量。

编辑:如所示，如果使用 ES2015 或更新版本，lambda 函数是正确的

var vueApp = new Vue({
    el: '#shopify-app',
    created: function() {
        this.setupShopAndCart();
    },
    data: {
        shopCart: null,
        shopClient: null,
    },
    methods: {
        setupShopAndCart: function() {
            this.shopClient = ShopifyBuy.buildClient(
                {
                    apiKey: 'xxx',
                    domain: 'xxx.myshopify.com',
                    appId: '6'
                }
            );
            if(localStorage.getItem('lastCartId')) {
                this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(
                    (remoteCart) => {
                        this.shopCart = remoteCart;
                        cartLineItemCount = this.shopCart.lineItems.length;
                        console.log(this.shopCart.checkoutUrl);
                        console.log("fetching");
                    }
                );
            } else {
                this.shopClient.createCart().then(
                    (newCart) => {
                        this.shopCart = newCart;
                        localStorage.setItem('lastCartId', this.shopCart.id);
                        cartLineItemCount = 0;
                        console.log(this.shopCart.checkoutUrl);
                        console.log("failing");
                    }
                );
            }
        }, //setupShop end
    }
});