Хранить не актуальным при загрузке компонента - nuxt.js - PullRequest
Новая
       13

Хранить не актуальным при загрузке компонента - nuxt.js

1 голос
/ 23 октября 2019

возникли проблемы с моим магазином 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);
  }
};

Я попробовал все виды, включая setTimout на странице категории, чтобы убедиться, что магазин обновлен с текущим продуктом, прежде чем перейти на страницу продукта.

Любые предложения приветствуются.

Спасибо

...