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

Question

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

1

Я пытаюсь установить состояние 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: {

  }
})

я не работаю, мое состояние пустое, поэтому данные не отображаются на моем шаблоне (я надеюсь, что кто-то должен мне помочь!

PS: Также, когда он регистрируется на стороне клиента, все работает нормально, но в SSR нет (

Albert Jovinskyi 29 окт. 2018, в 14:16

Источник

0

Не могли бы вы добавить действие setApp к вашему вопросу? Кроме того, я не думаю, что вы входите в нужное место, поскольку created и mounted хуки жизненного цикла будут выполнены до того, как будет произведена ваша fetch .
Thomas Ferro 29 окт. 2018, в 13:02
0

@ThomasFerro да, конечно, теперь вы можете посмотреть на него)
Albert Jovinskyi 29 окт. 2018, в 13:03
0

@ThomasFerro Я не знаю, но данные не отображаются в моем шаблоне (он пустой, он работает, только если он на стороне клиента
Albert Jovinskyi 29 окт. 2018, в 13:04
0

Спасибо, можете ли вы попытаться записать свой $ store в вычисленный на основе состояния app ?
Thomas Ferro 29 окт. 2018, в 13:04
0

@ThomasFerro о состоянии приложения, вы имеете в виду метод выборки или индексный файл в папке магазина?
Albert Jovinskyi 29 окт. 2018, в 13:07
0

На том же компоненте, что и created и mounted хуки жизненного цикла.
Thomas Ferro 29 окт. 2018, в 13:09
0

@ThomasFerro да, тоже пусто, работает только по методу выборки
Albert Jovinskyi 29 окт. 2018, в 13:13
0

@ThomasFerro только для метода получения, он не пустой. Но когда он обновляется на стороне клиента, он работает правильно
Albert Jovinskyi 29 окт. 2018, в 13:15

Показать ещё 6 комментариев

Теги:

javascript

vue.js

vuex

nuxt.js

1 ответ

Ещё вопросы

Не могли бы вы добавить действие setApp к вашему вопросу? Кроме того, я не думаю, что вы входите в нужное место, поскольку created и mounted хуки жизненного цикла будут выполнены до того, как будет произведена ваша fetch .
@ThomasFerro да, конечно, теперь вы можете посмотреть на него)
@ThomasFerro Я не знаю, но данные не отображаются в моем шаблоне (он пустой, он работает, только если он на стороне клиента
Спасибо, можете ли вы попытаться записать свой $ store в вычисленный на основе состояния app ?
@ThomasFerro о состоянии приложения, вы имеете в виду метод выборки или индексный файл в папке магазина?
На том же компоненте, что и created и mounted хуки жизненного цикла.
@ThomasFerro да, тоже пусто, работает только по методу выборки
@ThomasFerro только для метода получения, он не пустой. Но когда он обновляется на стороне клиента, он работает правильно

aBiscuit · Accepted Answer · 2018-10-29T11-32-00.000Z

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

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

В приведенном выше примере кода запрос acios сделан внутри крюка 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);
  })
}