URL이 변경되기 전에 스토어 상태가 업데이트되는 Nuxt.js 문제

URL이 변경되기 전에 스토어 상태가 업데이트되는 Nuxt.js 문제

저는 현재 Nuxt.js를 배우고 있는데, 도움이 되었으면 합니다.

페이지 사이를 이동할 때 오류가 발생하여 페이지 URL의 렌더링이 완료되기 직전에 스토어 상태가 업데이트되므로 이전 템플릿의 다음 페이지 내용을 잠깐 볼 수 있지만 이유를 알 수 없습니다.

시나리오는 다음과 같습니다.[ / terms / ]페이지가 표시되고 로고를 클릭하여 홈페이지로 이동합니다.홈 페이지의 컨텐츠는, 「」아래에 렌더링 됩니다.pages/_slug/index.vue페이지 URL이 렌더링될 때까지 잠시 파일을 보관합니다.

링크가 다음 링크일 때만 발생한다는 것을 알게 되었습니다.<nuxt-link to="/">만약 내가 전통적인 것을 사용한다면<a :href="/"></a>문제는 발생하지 않습니다.

글로벌을 보유하고 있습니다.pageVuex 스토어의 상태를 나타냅니다.이 상태는 페이지마다 변경되며 비동기 데이터 메서드를 통해 업데이트됩니다.

스토어:store/index.js

import Vuex from 'vuex';
import api from '~/api';

const store = () => {
    return new Vuex.Store({
        state: {
            page: null,
        },

        actions: {
            getHomepage({ commit }) {
                return new Promise((resolve, reject) => {
                    api.getHomepage().then(response => {
                        commit('setPage', response);
                        resolve(response);
                    })
                    .catch(error => {
                        reject(error);
                    });
               });
            },

            getPage({ commit }, slug) {
                return new Promise((resolve, reject) => {
                    api.getPage(slug).then(response => {
                        commit('setPage', response);
                        resolve(response);
                    })
                   .catch(error => {
                       reject(error);
                   });
                });
            }
        },

        mutations: {
            setPage(state, page) {
                state.page = page;
            }
       }
    })
}

export default store;

홈페이지 템플릿:pages/index.vue

async asyncData({ store, error, payload }) {
    if(payload) {
        store.commit('setPage', payload.page);
    } else {
        return Promise.all([
            store.dispatch('getHomepage')
        ]).catch(() => {
            error({ message: 'Page not found' });
        });
    }
}

기타 페이지 템플릿:pages/_slug/index.vue

async asyncData ({ store, params, error, payload }) {
    if(payload) {
        store.commit('setPage', payload.page);
    } else {
        return Promise.all([
            store.dispatch('getPage', params.slug)
        ]).catch(() => {
            error({ message: 'Page not found' });
        });
    }
}

내 느낌은... 왜냐하면...page상태는 모든 페이지에서 공유되며, 페이지 간에 상태를 업데이트하면 업데이트는 반응적이고 변경을 감시하기 때문에 현재 보고 있는 페이지에 업데이트가 렌더링됩니다.

어떻게 하면 이 문제를 극복할 수 있을까요?단순히 "page"라는 하나의 상태를 가질 수 없는 건가요?

언급URL : https://stackoverflow.com/questions/51295642/nuxt-js-issue-where-store-state-is-updating-before-the-url-changes