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: {

  }
})

我不工作，我的状态为空，因此数据未呈现在我的模板上（我希望有人能帮助我！

P.S：同样，在客户端登录时，一切都可以正常运行，但在SSR中不能正常运行（

Answer 1

如docs

中所述

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

在上面的代码示例中，axios请求是在fetch钩子内发出的，但是Nuxt不会等待它解决，因为没有返回任何诺言，因此它将继续呈现组件，从而运行created和mounted钩子，在调用时还没有填充$store。

为了使其生效，您应该从fetch方法返回一个承诺。

如果您的应用中没有其他代码，只需添加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);
  })
}

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

1 个答案: