Длительное действие блокирует процесс рендеринга - PullRequest
Новая
       21

Длительное действие блокирует процесс рендеринга

0 голосов
/ 26 марта 2019

У меня есть функция, которую я вызываю в шаблоне компонента.Он реагирует на изменения в компоненте vue-select. 

<v-select
  v-model="model"
  :options="eventList"
  :placeholder="currentEventTitle"
  v-on:input="selectedEvent"
  taggable
  label="name"
></v-select>

...

</template>
<script>

...

methods: {
   ...mapActions({
      selectedEvent: "selectedEvent"
   })
}

Это отправляемое действие selectedEvent содержит множество HTTP-вызовов, фиксацию в хранилище и вызовы других действий.Проблема в том, что после вызова пользовательский интерфейс полностью блокируется и не обновляется примерно до половины функции.

Как мне вызвать действие, которое будет совершать (изменять) и отправлять другие действия, а не блокировать пользовательский интерфейс?

Обновление

Проблема исчезла в нашей производственной сборке и существует только тогда, когда у нас включен режим разработки.

1 Ответ

0 голосов
/ 27 марта 2019

Если vuex наблюдатель / реактивность является причиной блока пользовательского интерфейса, можно просто заморозить большие объекты, чтобы предотвратить реактивность: 

actions = {

   // ...,
   assignBigData(context, data){
      //...
      // mutate data
      const clone = {...data}
      context.commit('commiter', Object.freeze(clone))
   },
   selectedEvent: async function(context, ...args){

     const response = await request()

     context.dispatch('assignBigData', Object.freeze(response))
   }
}
...