0

При переходе по маршруту в компонент все норм, но стоит перезагрузить страницу валятся ошибки, что переменных используемых в шаблоне не существует. Потом оно подгружается, но я так понимаю что при перезагрузке store чистится и данные запрашиваются по новой. В итоге шаблон монтируется раньше чем приходят данные. Как своевременно получать данные, чтобы не было ошибок?

Получение данных в компоненте

import { useRoute } from "vue-router";
import { useStore } from "vuex";
  setup(props) {
    const route = useRoute();
    const store = useStore();

    store.dispatch('getProducts')
   
    const product = computed(() => {
      return store.getters.getProduct(route.params.slug)
    })

    return {
     product,
    };
  },

Вот то что во VueX

import {
  createStore
} from 'vuex'

const URL = process.env.VUE_APP_API_URL
const CK = 'consumer_key=' + process.env.VUE_APP_CK
const CS = 'consumer_secret=' + process.env.VUE_APP_CS
const authParams = `${CK}&${CS}`


export default createStore({
  state: {
    products: [],
  },
  getters: {
    salePraceProducts(state) {
      return state.products.filter(item => item['sale_price'].length > 0)
    },
    
    getProduct: (state) => (slug) => {
      return state.products.find(item => item.slug === slug)
    }
    
  },
  actions: {
    async getProducts({commit}) {
      let res = await fetch(`${URL}/products?${authParams}`);
      if (res.ok) {
        let resData = await res.json();
        commit('setProducts', resData)
      }
    },
  },
  mutations: {
    setProducts(state, items) {
      state.products = items
    },
  },
})

Вот ошибки в консоле

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating '$setup.product.name') [Vue Router warn]: uncaught error during route navigation:

[Vue warn]: Unhandled error during execution of render function

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next

1 ответ 1

0

Решение нашел в использовании promise, так так dispatch возвращает promise.

1
  • Если не хотите отслеживать события по Promise (что правильно), то можно просто в компоненте поставить v-if на ту переменную которая получается асинхронно ПОСЛЕ прохода setup(), тогда компонент появится только после наличия всех данных. 24 янв 2022 в 8:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.