AsyncData vs nuxtServerInit

Question

我为身份验证用户和用户令牌设置了一些cookie。

在那之后，在每个nuxtServerInit上，我都会检查cookies中的相同数据，并将它们设置在存储中。

虽然我在一些页面中使用了asyncaData，但似乎asyncData先于nuxtServerInit启动……

async asyncData (context) {
    console.log(context.store.getters['auth/getToken'])
}

在这个日志中，我得到了null或任何在状态中预先设置的东西：

export default () => ({
  user: null,
  token: null
})

我有带有模块的商店，其中我有带有index.js, actions.js, mutations.js, state.js and getters.js的auth module

在我的行动中：

export const nuxtServerInit = ({ commit, getters }, { req, res }) => {
  commit('setToken', 'token')
  console.log('WORKING...')
}

当我用asyncData方法刷新页面时，我得到一个错误，getToken getter返回null而不是'token'字符串。来自nuxtServerInit的console.log永远不会触发。

从这个GitHub page中可以看出，应该先触发nuxtServerInit，然后再触发asyncData。

在我的情况下它不工作..。

有什么想法吗？

Answer 1

nuxtServerInit是一个动作，需要包含在存储文件的动作导出中：

export const actions = {
  nuxtServerInit = ({ commit, getters }, { req, res }) => {
    commit('setToken', 'token')
    console.log('WORKING...')
  }
}

还要注意，它需要位于存储的根模块(index.js)中才能正常工作

Answer 2

只能在主模块中定义nuxtServerInit操作。

如果您使用的是Vuex商店的模块模式，则只有主模块(在store/index.js中)才会收到此操作。你需要从那里链接你的模块动作。

https://nuxtjs.org/guide/vuex-store#the-nuxtserverinit-action

Answer 3

export const async nuxtServerInit = ({ commit, getters }, { req, res }) => {
  await commit('setToken', 'token')
  console.log('WORKING...')
}