时间戳

首页 > 解决方案 > 长动作正在锁定渲染器进程

user-interface - 长动作正在锁定渲染器进程

问题描述

我有一个在组件模板中调用的函数。它对 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 调用、对存储的提交以及对其他操作的调用。问题是，一旦调用了它，UI 就会完全锁定并且直到函数执行到一半才会更新。

我应该如何调用将提交（变异）并调度其他操作而不锁定 UI 的操作？

更新

该问题在我们的生产版本中消失了，并且仅在我们启用了开发模式时才存在。

标签： user-interfacevue.jselectronvuex

解决方案

如果 vuex 观察者/反应性是 ui 块的原因，则可以简单地冻结大对象以防止反应性：

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))
   }
}

推荐阅读