State Vuex не работает правильно с проблемой Nuxt.js - PullRequest
Новая
       6

State Vuex не работает правильно с проблемой Nuxt.js

0 голосов
/ 29 октября 2018

Я пытаюсь установить состояние vuex в своем приложении Nuxt.js, но оно работает неправильно. Итак, я установил свое состояние методом выборки: 

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 нет (

1 Ответ

0 голосов
/ 29 октября 2018

Как указано в документах

Чтобы сделать метод выборки асинхронным, верните Promise, Nuxt.js будет ожидать разрешения, прежде чем выполнить рендеринг компонента.

В приведенном выше примере кода запрос axios выполняется внутри fetch hook, но 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);
  })
}
...