Question

我正在使用Github的API来获取固定存储库的列表，然后将调用放在AsyncData方法中，以便将列表放在第一个渲染器上。但是我刚刚了解到AsyncData在ServerSide上被调用一次，然后每次在客户端上加载页面时都会被调用。这意味着客户端不再具有进行API调用的令牌，无论如何，我不会让我的Github令牌进入客户端。

当我切换页面（从另一个页面到带有列表的页面）时，数据不存在，我只有默认的空数组

我不知道确保我的数据始终在服务器端加载的最佳方法是什么？

export default defineComponent({
  name: 'Index',
  components: { GithubProject, Socials },
  asyncData(context: Context) {
    return context.$axios.$post<Query<UserPinnedRepositoriesQuery>>('https://api.github.com/graphql', {
      query,
    }, {
      headers: {
        // Token is defined on the server, but not on the client
        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
      },
    })
      .then((data) => ({ projects: data.data.user.pinnedItems.nodes }))
      .catch(() => {});
  },
  setup() {
    const projects = ref<Repository[]>([]);

    return {
      projects,
    };
  },
});

Answer 1

在页面的if(process.server)方法内的asyncData中包装您的请求。

如果您绝对需要服务器端调用而不能从客户端进行调用，则只需操纵location.href即可强制页面完成加载。

Answer 2

您应该将Vuex与nuxtServerInit一起使用。

nuxtServerInit将始终在首页加载时触发，无论您在哪个页面上。因此，您应该先导航到store/index.js。

之后，您创建一个状态：

export const state = () => ({
  data: []
})

现在，您可以创建刷新页面时始终执行的操作。 Nuxt可以访问商店，即使它在服务器端。

现在，您需要从组件中的存储中获取数据：

export const actions = {
  async nuxtServerInit ({ state }, { req }) {
    let response = await axios.get("some/path/...");
    state.data = response.data;
  }
}

您可以将令牌存储在cookie中。 Cookies在客户端，但是nuxtServerInit有第二个参数。请求req。这样，您就可以访问标题，并且还有cookie。

let cookie = req.headers.cookie;

Nuxt：仅在服务器端获取数据

2 个答案: