在用于 shopify 的 vue.js 应用程序中变量保持为空 [英] Variables staying null in vue.js application for shopify

问题描述

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

I am building up a vue.js application for Shopify's JavaScript Buy SDK, but i am having problems with one variable not being updated.

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

Basically the shopClient variable is updated, but the shopCart stays null for some reason.

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

推荐答案

您在确定范围时遇到问题.承诺中的 this 不是 vue 实例.

You have a problem with scoping. this in the promise isn't the vue instance.

试试这个

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 变量.

That stores the local vue instance in the self variable that is accessable to the promises allowing you to set the shopCart variable.

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

As indicated lambda functions are correct if using ES2015 or newer

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

这篇关于在用于 shopify 的 vue.js 应用程序中变量保持为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！