在另一个javascript vue js文件中使用导出的数据时，该数据为空

我正在开发一个shopify主题，目前我正在处理购物车页面，我有CartForm.js文件，我正在从cartData.js文件导入数据。这是CartForm.js

import { store } from "./../shared/cartData.js";
if (document.querySelector('.cart-form')) {


    let productForm = new Vue({
        el:".cart-form",
        delimiters: ['${', '}'],
        data(){
            return{
                cart:null,
            }
        },

        created(){ 
            this.getCart();
        },        
        methods:{
            getCart(){
                store.getCart();
                this.cart=store.state.cartData;
                console.log("cart data: "+this.cart);                
        },

这是cartData.js文件

export const  store = {

    state: {
        cartData:null
    },
    getCart(){   
        alert("store get cart called!...")     

        axios.get('/cart.js')
                .then( response => {                    
                     this.state.cartData=response.data;                     
                    console.log("Responsed data="+this.state.cartData);                    
                })
                .catch( error => {
                    new Noty({
                        type: 'error',
                        layout: 'topRight',
                        text: 'There was an error !!'
                    }).show();
                });
    }

}

---

如您所见，我显式调用store.getCart（）；在CartForm的getCart（）方法中，当打印“Responsed data”时，它显示this.state.cartData填充了数据，但当我这样使用它时：this.cart=store.state.cartData；this.cart为空，为什么为空？非常感谢您提供的任何帮助

发生这种情况是因为您的API需要一段时间才能响应，但JavaScript会继续并行运行该函数。当调用尚未返回时，您的状态仍然为“null”，因此this.cart将设置为null，除非您告诉JavaScript等待调用完成

尝试将

getCart（）

方法设置为异步函数：

methods:{
            async getCart(){
                await store.getCart();
                this.cart=store.state.cartData;
                console.log("cart data: "+this.cart);                
        },

如果购物车应始终与商店中的数据相同，则更好的方法可能是为购物车使用

computed

属性。这将直接返回store.state，并将帮助您为数据保留一个真实来源

computed: {
  cart() {
    return store.state.cartData
  }
}

---

谢谢现在我明白发生了什么事了