Привет! Мне действительно нужна помощь более сильных людей во Vue / Nuxt, чем я.
У меня есть сайт на Nuxt. Мы используем Swiper JS для отображения бесконечных статей.
Все работает хорошо НО, после обновления страницы (f5) ломается вся логика. И я не понимаю, в чем может быть проблема. На localHost такой проблемы нет.
Смотрите:
До f5
После f5 (url = 11), но это не статья. И все слетело (т.е. все статьи подгрузились)
Я наблюдаю только одно очень странное поведение. А именно при обновлении я вижу главную страницу.
Вы можете увидеть это сами! Просто
зайдите на сайт, затем нажмите на любую статью (карточку с надписью), попробуйте просто просмотреть, а затем обновить страницу!
Мне действительно нужна помощь, потому что я в тупике!
Этот сайт делал бывший сотрудник, который явно где-то допустил ошибку, но связи с ним нет.
Все что делается со статьями в store, я предполагаю, что ошибки в async / await
import Vuex from 'vuex'
import * as axios from 'axios'
/* eslint-disable */
const store = () =>
new Vuex.Store({
state: {
articles: [],
articlesList: { results: [] },
fullArticleList: [],
url: '',
next: '',
prev: '',
id: '',
loadArticle: false
},
getters: {
articles(state) {
return state.articles
},
articlesList(state) {
return state.articlesList
},
getFullArticle(state) {
return state.fullArticleList
},
loadArticle(state) {
return state.loadArticle
},
getNextDisable(state) {
return state.nextDisable
},
getPreviousDisable(state) {
return state.previousDisable
}
},
mutations: {
getArticles(state, articles) {
state.articles = articles
},
getArticlesList(state, articlesList) {
state.articlesList = articlesList
},
getFullArticle(state, article) {
state.fullArticleList.push(article.results[0])
state.next = article.next
state.prev = article.previous
state.id = article.results[0].id
state.loadArticle = false
},
loadArticle(state) {
state.loadArticle = true
}
},
actions: {
async getArticles({ commit }) {
const res = await axios.get(
`https://vopros.ips-dev.com/api/articles/scroll?cursor=cj0x&page_size=5`
)
commit('getArticles', res.data.results)
},
async getFullArticle({ commit, state }, initialId) {
commit('loadArticle')
const id = Buffer.from(`r=0&p=${initialId - 1}`).toString('base64')
const res = await axios.get(
`https://vopros.ips-dev.com/api/articles/scroll?cursor=${id}&page_size=1`
)
state.next = res.data.next
state.prev = res.data.previous
commit('getFullArticle', res.data)
},
async returnArticle({ commit, state }) {
if (state.next != null) {
commit('loadArticle')
const res = await axios.get(state.next)
commit('getFullArticle', res.data)
history.pushState(null, null, state.id)
}
},
async addArticle({ commit, state }) {
if (state.prev != null) {
commit('loadArticle')
const res = await axios.get(state.prev)
commit('getFullArticle', res.data)
history.pushState(null, null, state.id)
}
},
deleteArticles({ state }) {
state.fullArticleList = []
},
deletePrevArticles({ state }) {
if (state.fullArticleList.length >= 2) {
setTimeout(() => {
state.fullArticleList.splice(1, 1)
}, 500)
}
}
}
})
export default store
Надеюсь на Вашу помощь, спасибо!
