Vuejs2 组件加载时存储不是最新的-nuxt.js

Vuex存储和加载组件出现问题。我在我的nuxt应用程序中有一个类别/产品样式页面结构，我正试图简单地从类别移动到产品页面。但在进入产品页面时，始终出现“无法读取未定义的属性“url”错误

之所以会发生这种情况，是因为我的商店似乎只有在产品页面组件加载后才会更新，即使使用async/await也是如此

这是我的分类组件：

<template>
  <div class="container mb-5">
    <div class="page-title-container py-3">
      <h1 class="border-bottom border-dark">{{ currentRange.name }}</h1>
    </div>
    <div class="row product-list">
      <div v-for="product in categoryData.products" class="col-12">
        <a @click="setProduct(product)" class="d-flex flex-row mb-3 py-3 border product">
          <div class="img-container overflow-hidden d-flex flex-column justify-content-center align-items-center px-2">
            <img class="img-fluid" :src="product.icon.url"/>
          </div>
          <div class="attributes d-flex flex-column justify-content-center">
            <span class="pb-2 border-bottom mb-2 mr-2"><strong>{{ product.name }}</strong></span>
            <span>{{ product.rental_rate.price | currency('£') }} per week</span>
            <span class="btn btn-outline-primary rounded-0 btn-sm mt-3" :class="(configurable(product) === 'Bundle') ? 'w-75' : 'w-50'">{{ getButtonText(product) }}</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
    import Slugify from 'slugify';

    export default {
        data: function () {
            return {}
        },
        async asyncData(context) {
            let currentCategoryId = context.store.state.app.currentCategory.id;
            let {data} = await context.$axios.get('https://api.current-rms.com/api/v1/products?q[m]=or&q[g][0][6_eq]=' + currentCategoryId + '&q[g][1][6_start]=' + currentCategoryId + ',&q[g][2][6_end]=,' + currentCategoryId + '&q[g][3][6_cont]=,' + currentCategoryId + ',');
            return {categoryData: data}
        },
        methods: {
            productSlug(product) {
                return Slugify(product.name, {lower: true});
            },
            configurable(product) {
                let type = this.$store.getters.getCustomFieldListValue(product.custom_fields.product_type);
                return type[0].name;
            },
            getButtonText(product) {
                return (this.configurable(product) === 'Bundle') ? 'CONFIGURE' : 'VIEW';
            },
            async setProduct(product) {
                await this.$store.dispatch('setProduct', product). then(() => {
                    this.$router.push({name: 'products-slug', params: { slug:this.productSlug(product)} });
                });
            }
        },
        computed: {
            currentRange() {
                let currentCategory = this.$store.state.app.currentCategory;
                if (currentCategory == null) {
                    return this.$store.state.app.previousCategory;
                }

                return currentCategory;
            }
        }
    }
</script>

<template>
    <div class="container product-page">
      <div class="img-container">
        <img class="img-fluid" :src="product.icon.url"/>
      </div>
      <div class="attributes d-flex flex-column justify-content-start">
        <span class="pb-2 border-bottom mb-2 mr-2"><strong>{{ product.name }}</strong></span>
        <span>{{ product.rental_rate.price | currency('£') }} per week</span>
      </div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
              product: {}
            }
        },
        mounted() {
            this.product = this.$store.state.app.currentProduct;
        }
    }
</script>

我尝试了各种方法，包括在分类页面中设置时间，以确保在转到产品页面之前，商店已使用当前产品进行更新

欢迎任何建议

谢谢

export const state = () => ({
  app: {
    currentProduct: {}
  },
});

export const mutations = {
  SET_CURRENT_PRODUCT(state, payload) {
    state.app.currentProduct = payload;
  }
};

export const actions = {
  async setProduct({dispatch, commit}, product) {
    await commit('SET_CURRENT_PRODUCT', product);
  }
};