Отправка получения неопределенного значения - PullRequest
Новая
       7

Отправка получения неопределенного значения

0 голосов
/ 14 ноября 2018

У меня проблема с обновлением состояния после отправки.

Консоль, регистрирующая результат dispatch, показывает Promise pending и значение undefined, следовательно, никогда не попадает в хранилище.

консольный результат

Ниже приведена функция, которая вызывает обработчик dispatch. 

unsetSelected() {
   let some = this.$store.dispatch('user/selectedDevice', null)
   console.log(some)
}


<span class="ellipsis" @click="setSelected(device)">
     <i v-if="selectedDevice && selectedDevice.id == device.id"
        @click="unsetSelected()"
        class="fa fa-times-circle">
     </i>
     <i v-else="" class="fa fa-ellipsis-v"></i>
</span>

Это обработчик действий: 

selectedDevice ({ commit }, data) {
    commit ('SELECTED_DEVICE', data);
}

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Я включил оповещение на обработчик мутаций и обнаружил, что код работает как положено, только что он также запускает функцию dispatch, описанную выше в DOM.

Я должен связать это с .stop модификатором: @click.stop="unsetSelected()"

0 голосов
/ 14 ноября 2018

Из ссылки API Vuex для диспетчеризация методы экземпляра:

Возвращает Promise, который разрешает все обработчики инициируемых действий.

Так называется dispatch возвращает Обещание .Для получения данных внутри компонента это обещание должно быть разрешено.

Вы можете изменить метод компонента следующим образом: 

// using async/await
async unsetSelected() {
  try {
    let some = await this.$store.dispatch('user/selectedDevice', null)
    console.log(some)
  } catch (error) {
    // handle error
  }
}

// using Promise API
unsetSelected() {
  this.$store.dispatch('user/selectedDevice', null)
    .then((some) => {
      console.log(some)
    })
    .catch((error) => {
      // handle error
    })
}

Кроме того, selectedDevice не возвращает никаких данных, поэтому some (или ответ) от разрешенного обещания будет undefined для примера кода, указанного в вопросе.

Чтобы исправить это, действие хранилища должно иметь оператор return с необходимыми данными для возврата в компонент.

Хотя, следуя архитектуре Vuex, было бы предложено отобразить состояние / получатели , значения которых будут реактивно обновляться после фиксации изменения состояния.

...