Question

我有一个要在组件模板中调用的函数。它对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的操作？

更新

问题已在我们的生产版本中消失，仅在启用开发模式后才存在。

Answer 1

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

长动作锁定了渲染器进程

更新

1 个答案: