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

Question

我正在开发一个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() 方法中，当打印“响应数据”时，它显示 this.state.cartData 填充了数据，但是当我像这样使用它时: this.cart=store.state.cartData; this.cart 为 null，为什么为 null？任何帮助表示赞赏

Answer 1

发生这种情况是因为您的 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);                
        },

如果购物车应始终与商店中的数据相同，则更好的方法可能是使用购物车的计算属性。这会直接返回 store.state，并将帮助您保持数据的单一事实来源。

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