狀態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);
  })
}