Магазин Vuex не обновляется при вызове из разрешения обещания

Question

Магазин Vuex не обновляется при вызове из разрешения обещания

1

У меня есть массив, связанный с хранилищем данных vuex и отображаемый как вычисленное свойство через помощник mapGetters. Этот массив называется items, и я вызываю REST API, чтобы обновить его в created() hook компонента. Действие vuex, которое у меня есть для этого, возвращает обещание, к которому обращается API, и вызывающий мутатор (который обновляет массив items) до разрешения. Мое понимание обещаний говорит мне, что мой then вызовы должны безопасно происходить после того, как асинхронное действие завершается, но если я пытаюсь получить доступ items из резолюции обещания, он пуст, несмотря на массив, конечно, будучи населенным вызовом API. Почему это не работает, как я ожидаю?

Код целиком, но вот соответствующие части

Составная часть:

  computed: {
    ...mapGetters({
      items: 'allHistoryItems'
    }),
// ...
  created () {
    this.$store.dispatch('fetchList').then(console.log(this.items))
  }

Действие:

  fetchList: ({ commit }) => {
    return new Promise((resolve, reject) => {
      fetchList().then(response => {
        commit(types.FETCH_LIST, response.data)
        resolve(response)
      })
    })
  }

Я могу получить доступ к ответу API от компонента, но, как уже упоминалось, items пустые. Не реагирует ли реактивность до тех пор, пока не решит обещание?

ssb 06 нояб. 2017, в 11:53

Источник

0

Избегайте анти-паттерна конструктора обещаний - сказав это, как «Действие» меняет элементы? Я не вижу связи
Jaromanda X 06 нояб. 2017, в 10:48
0

аааа .then(console.log(this.items)) ... должно быть .then(() => console.log(this.items)) ... .then нужна функция в качестве аргумента, а не результат вызов console.log (который, кстати, не определен)
Jaromanda X 06 нояб. 2017, в 10:49
0

Я проверю статью. Элементы сопоставляются с получателем, который манипулирует и возвращает список, полученный API.
ssb 06 нояб. 2017, в 10:50
0

проигнорируйте мой первый комментарий, ошибка, которую вы сделали, находится во втором моем комментарии
Jaromanda X 06 нояб. 2017, в 10:52
0

Пойди разберись, это что-то базовое. Я проверю это позже, но сделаю это ответом, и я приму это.
ssb 06 нояб. 2017, в 10:54

Показать ещё 3 комментария

Теги:

javascript

vue.js

vuex

promise

2 ответа

0

Я думаю, что ваша новая конструкция Promise просто избыточна. Inspec этот простой пример, если он делает то, что вы хотите:

var store = new Vuex.Store({
  state: {
    hero: []
  },
  mutations: {
    updateHero (state, payload) {

      state.hero = payload
    }
  },
  actions: {
    async loadHero ({commit}, payload) {
      var response = await fetch('https://swapi.co/api/people/1/')
      commit('updateHero', await response.json())
    }
  }
})

new Vue ({
  el: '#app',
  store,
  computed: {
    hero () {
      return this.$store.state.hero
    }
  },
  methods: Vuex.mapActions(['loadHero'])
})

[v-cloak] {
  display: none;
}

<div id="app">
  Hero name is: <span v-cloak>{{ hero.name }}</span><br>
  <button @click="loadHero">Load hero personal data</button>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

user6748331 06 нояб. 2017, в 08:52

Ещё вопросы

Избегайте анти-паттерна конструктора обещаний - сказав это, как «Действие» меняет элементы? Я не вижу связи
аааа .then(console.log(this.items)) ... должно быть .then(() => console.log(this.items)) ... .then нужна функция в качестве аргумента, а не результат вызов console.log (который, кстати, не определен)
Я проверю статью. Элементы сопоставляются с получателем, который манипулирует и возвращает список, полученный API.
проигнорируйте мой первый комментарий, ошибка, которую вы сделали, находится во втором моем комментарии
Пойди разберись, это что-то базовое. Я проверю это позже, но сделаю это ответом, и я приму это.

Jaromanda X · Accepted Answer · 2017-11-06T08-53-00.000Z

Короче

created () {
    this.$store.dispatch('fetchList').then(console.log(this.items))
}

Когда вызвано created, он выполняет:

this.$store.dispatch('fetchList')

затем сразу

console.log(this.items)

Нет ничего ждать, тогда, когда this.$store.dispatch('fetchList') решает, .then не называется, как .then(undefined)... потому что console.log(this.items) возвращает undefined

измените это на

created () {
    this.$store.dispatch('fetchList').then(() => console.log(this.items));
}

В качестве бонуса - удаление конструктора обещаний anti-pattern:

fetchList: ({ commit }) => fetchList() 
    .then(response => {
        commit(types.FETCH_LIST, response.data);
        return response;
    }
);