При переходе по маршруту в компонент все норм, но стоит перезагрузить страницу валятся ошибки, что переменных используемых в шаблоне не существует. Потом оно подгружается, но я так понимаю что при перезагрузке 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