Question

我目前正在学习Nuxt.js，希望您能帮助我。

在页面之间导航时出现错误，有几毫秒的闪烁，其中页面状态完成渲染之前我的商店状态已更新，因此您会在旧模板上短暂看到下一页的内容，而我无法解决为什么！

这是场景。我正在查看/ terms /页面，然后通过单击徽标导航到主页。主页内容在pages/_slug/index.vue文件下呈现一会儿，直到页面URL呈现为止。

我注意到只有在链接为<nuxt-link to="/">时，它才会发生。如果我使用传统的<a :href="/"></a>，则不会发生此问题。

我在Vuex存储中具有全局page状态，该状态在页面之间变化，并通过asyncData方法进行更新。

商店：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状态在所有页面上共享，并且当我在页面之间更新状态时，它会在我正在查看的页面上呈现更新，因为它是被动的并监视更改

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

Nuxt.js问题，其中URL更改之前商店状态正在更新

0 个答案: