状态Vuex无法与Nuxt.js一起正常工作

Question

我正在尝试在Nuxt.js应用程序上设置状态vuex，但是它无法正常工作。 所以在这里，我用获取方法设置状态：

fetch({app, store, route}) {
    app.$axios.$get(`apps/${route.params.id}`)
      .then(res => {
        store.dispatch('setApp', {
          ...res,
          id: route.params.id
        })
        console.log(app.store.state.app);
      })
  }

当我登录app.store时，这里的所有数据都可以正确运行，但是数据在那里，但是当我尝试登录时：

  created() {
    console.log(this.$store);
  },
  mounted() {
    console.log(this.$store);
  }

这是我的商店代码：

const store = () => new Vuex.Store({

  state: {
    app: ''
  },
  mutations: {
    'SET_APP' (state, payload) {
      state.app = payload
    }
  },
  actions: {
    setApp (ctx, payload) {
      ctx.commit('SET_APP', payload)
    }
  },
  getters: {

  }
})

我不工作，我的状态是空的，所以数据没有呈现在我的模板上（我希望有人能帮助我！

PS：同样，当它在客户端登录时，一切正常，但是在SSR中，不（

Answer 1

如文档所述

为了使fetch方法异步，返回Promise，Nuxt.js将在渲染组件之前等待Promise被解决。

在上面的代码示例中，axios请求是在fetch挂钩中发出的，但是Nuxt不会等待它解决，因为没有返回承诺，因此它会继续渲染该组件，从而运行已created和已mounted挂钩，在调用时会执行此操作还没有填满$store 。

为了使其工作，您应该从fetch方法返回一个promise。

如果您的应用程序中没有其他代码，只需添加return语句即可解决此问题：

fetch({app, store, route}) {
  return app.$axios.$get(`apps/${route.params.id}`)
    .then(res => {
      store.dispatch('setApp', {
      ...res,
      id: route.params.id
    })
    console.log(app.store.state.app);
  })
}