为什么不能在商店的 nuxtServerInit 中获取工作？

Question

对于我的项目，我使用的是 Nuxt。在商店的动作中，我有这段代码：

async nuxtServerInit({ commit }) {
  this.dispatch('fetchAllClients')
},
async fetchAllClients({ commit, state }) {
  console.log('fetch clients')
  await fetch('http://localhost:1337/api/clients', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => res.json())
    .then((res) => commit('storeClients', res))
},

所以，在 Nuxt init 上，我希望一些提取是运行，这样它就可以更新一些状态（这是在提取中提交的 storeClients() 中完成的）。如果我在 nuxtServerInit() 中复制 fetchAllClients() 方法，那么一切正常。

async nuxtServerInit({ commit }) {
  await fetch('http://localhost:1337/api/clients', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => res.json())
    .then((res) => commit('storeClients', res))
},

但是当我调用上面代码中所示的单独方法时，fetch 将不起作用。显示了日志，因此正确调用了该方法。但不知何故，获取并没有做任何事情。我做错了什么？

Answer 1

你应该改用这个

async nuxtServerInit({ dispatch }) {
  await dispatch('fetchAllClients')
}

为什么不能在商店的 nuxtServerInit 中获取工作？

Why doesn't fetch work in store's nuxtServerInit?

store

fetch

vue.js

nuxt.js