Vue возвращает [__ob__: Наблюдатель]

Question

У меня есть API:

getFollowers(following) {
  return axios.post(`${options.serverUrl}/follower/get-followers`, {following})
},

И компонент с этим методом:

created () {
  this.loadFollowers()
},
async loadFollowers () {
  const response = await services.getFollowers(this.$store.state.profile._id)
  console.log('followers', response)
  this.followers = response.data
},

Серверная часть:

router.post('/follower/get-followers', (req, res) => {
  const query = {
    following: req.body.following
  }
  Follower.find(query)
    .populate('follower', 'firstname lastname avatar id _id')
    .then(result => res.send(result))
    .catch(err => console.error(err))
})

Проблема в том, что этот методработает правильно, когда страница загружается в горячем режиме (после сохранения изменений) или когда я открываю этот компонент из router-link, но не работает, если я перезагружаю страницу из браузера;он возвращает пустой массив.Я уже перепробовал все крючки жизненного цикла.

Answer 1

когда я вызываю метод (после перезагрузки страницы), мой магазин просто не готов, поэтому this.$store.state.profile._id = undefined.Как вызвать метод, когда магазин готов?

Вы можете добавить наблюдатель , который вызывает loadFollowers только тогда, когда у магазина есть идентификатор профиля:

export default {
  watch: {
    '$store.state.profile._id': {
      immediate: true,
      handler(profileId) {
        if (profileId) {
          this.loadFollowers(profileId)
        }
      }
    }
  },
  methods: {
    async loadFollowers (profileId) {
      const response = await services.getFollowers(profileId)
      ...
    }
  },
}

демо

Answer 2

Один из вариантов - подождать, пока ваш store будет готов, прежде чем позвонить на new Vue в своей главной.

Или использовать asyncComputed, чтобы получить свой идентификатор.

Или использовать @tony19 решение смотреть в магазине.

Answer 3

[__ob__: Observer] нормально видеть, когда у вас есть массив, наблюдаемый Vue, который также пуст.В противном случае вы увидите что-то вроде [__ob__: Observer, value1, value2].

. Что вы описываете, так это то, что если вы делаете запрос к services.getFollowers на первом тике, приложение существует, вы получаете пустой массив, и если вы делаете этопозже вы получите правильный ответ.Это говорит о том, что this.$store.state.profile._id не то, что вы ожидаете при запуске приложения.

Я бы предложил добавить оператор debugger в качестве второй строки loadFollowers и проверить состояние и сеть.вкладка для любого запроса была сделана.Если вы восстанавливаете состояние откуда-то, убедитесь, что состояние полностью восстановлено, прежде чем ваше приложение сможет действительно загружаться (например, добавьте v-if в представлении маршрутизатора, которое имеет значение true только при каждом восстановлении состояния).Если вы начинаете с нуля, убедитесь, что все мутации были запущены так, как вы ожидаете, перед этим вызовом API.