Vue.js Nuxt.js问题，其中存储状态在url更改之前更新

我正在学习Nuxt.js，希望你能帮助我

我在页面之间导航时出错。在页面url完成呈现之前，我的存储状态会在几毫秒内更新，因此您会在旧模板上短暂地看到下一页内容，我无法找出原因

下面是一个场景。我正在查看/terms/页面，然后通过单击徽标导航到主页。主页内容在

pages/_slug/index.vue

文件下呈现片刻，直到页面url呈现

我注意到只有当链接是

时才会发生，如果我使用传统的

则不会发生问题

我在Vuex存储中有一个全局

页面

状态，该状态会随页面的变化而变化，并通过asyncData方法进行更新

Store:

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' });
        });
    }
}

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' });
        });
    }
}

其他页面模板：

pages/\u slug/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' });
        });
    }
}

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' });
        });
    }
}

我有一种感觉，这是因为

页面

状态在所有页面上都是共享的，当我从一页到另一页更新状态时，它会在我正在查看的页面上呈现更新，因为它是被动的，并且会观察更改

---

我如何克服这个问题？难道不可能有一个称为“页面”的状态吗？

欢迎使用StackOverflow。您目前只是希望我们为您解决问题。请自己试一试，然后告诉我们你想出了什么-如果你在路上遇到了困难，请随时回来寻求帮助。@Hearen我不希望有人简单地解决这个问题。我已经多次尝试过了，这就是我目前拥有的，上面所有的代码都是我页面上的代码片段。我不确定这是一个nuxt错误还是我做错了什么，我正在努力解决它。