状态 Vuex 无法与 Nuxt.js 一起正常工作问题答案

【问题标题】：State Vuex don't work correctly with Nuxt.js Problem状态 Vuex 无法与 Nuxt.js 一起正常工作问题
【发布时间】：2019-04-02 09:45:50
【问题描述】：

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

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 中却不行（

【问题讨论】：

能否将setApp 操作添加到您的问题中？而且，我认为您登录的位置不正确，因为 created 和 mounted 生命周期挂钩将在您的 fetch 完成之前执行。
@ThomasFerro 是的，现在你可以观看了）
@ThomasFerro 我不知道，但我的模板上没有呈现数据（它是空的，只有在客户端才有效
谢谢，您可以尝试将您的 $store 记录在基于app 状态的计算中吗？
@ThomasFerro 关于应用程序状态，您的意思是在 fetch 方法或商店文件夹中的索引文件上？

标签： javascript vue.js vuex nuxt.js

【解决方案1】：

如docs所述

要使 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);
  })
}

【讨论】：