Styjun

Was adding milk to tea started to reduce employee tea break time?

wavelength of seismic wave with a gaussian source

What would be the ideal melee weapon made of "Phase Metal"?

How does one stock fund's charge of 1% more in operating expenses than another fund lower expected returns by 10%?

Should you avoid redundant information after dialogue?

Was the Ford Model T black because of the speed black paint dries?

Why would an Inquisitive rogue choose to use Insightful Fighting as opposed to using their Cunning Action to Hide?

How to convert 1k to 1000 and 1m to 1000000 in Excel

Filtering fine silt/mud from water (not necessarily bacteria etc.)

How can one write good dialogue in a story without sounding wooden?

How to make 1,1-diphenyl-1-butene from benzophenone and 1-bromopropane?

Grammy Winners Grading

Am I testing diodes properly?

TikZ Can I draw an arrow by specifying the initial point, direction, and length?

Why can't supermassive black holes merge? (or can they?)

What does "Fotze" really mean?

A "Simple" Task

If the derivative of a function is square of it then it is constant

Ambiguous sentences: How to tell when they need fixing?

Would letting a multiclass character rebuild their character to be single-classed be game-breaking?

How to repair a laptop's screen hinges?

Is it rude to tell recruiters I would only change jobs for a better salary?

Cops: The Hidden OEIS Substring

Are there any double stars that I can actually see orbit each other?

Long action is locking renderer process

Vuex removes state id key value pair on mutationVuex: Skipping Action and committing Mutation directly from ComponentAccess Vuex state based on user actionVuex function execute before the otherVuex - …mapActions call from template: Cannot read property 'dispatch' of undefinedvuex actions that do not need to commit a mutationVuex Mutation running, but component not updating until manual commit in vue dev toolsHow to create default Vuex state with proper isLoading propertySetting firebase.User in vuex results in eternal loopCannot get Vuex mutation or action to pass data to state

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a function that I'm calling in a component template. It reacts on changes in a vue-select component.

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

...

</template>
<script>

...

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

This selectedEvent action that is being dispatched contains many HTTP calls, commits to the store, and calls to other actions. The issue is that once this has been called, the UI completely locks and doesn't update until about halfway through the function.

How should I call an action that will commit (mutate), and dispatch other actions, and not lock the UI?

Update

The problem has disappeared in our production build and only exists when we have development mode enabled.

user-interface vue.js electron vuex

share|improve this question

edited Apr 16 at 3:55

John Snow

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I suggest thinking about webworkers - so you can push workload to an own "thread"
  
  – Estradiaz
  Mar 26 at 8:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The thing is the API calls don't block the UI thread when calling them without vuex. It was only after committing the results to the vuex store, calling the APIs through a dispatch, that this became an issue.
  
  – John Snow
  Mar 26 at 18:00
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hmm then I guess it is due to big data coming from HTTP calls and reactivity. I had a case with 2k+ items and solved it by referencing only a subset of those in vue/vuex - storing the data in a global or component non reactivly.
  
  – Estradiaz
  Mar 26 at 21:03
  

  
  
  
  

add a comment | 

0

I have a function that I'm calling in a component template. It reacts on changes in a vue-select component.

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

...

</template>
<script>

...

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

This selectedEvent action that is being dispatched contains many HTTP calls, commits to the store, and calls to other actions. The issue is that once this has been called, the UI completely locks and doesn't update until about halfway through the function.

How should I call an action that will commit (mutate), and dispatch other actions, and not lock the UI?

Update

The problem has disappeared in our production build and only exists when we have development mode enabled.

user-interface vue.js electron vuex

share|improve this question

edited Apr 16 at 3:55

John Snow

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I suggest thinking about webworkers - so you can push workload to an own "thread"
  
  – Estradiaz
  Mar 26 at 8:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The thing is the API calls don't block the UI thread when calling them without vuex. It was only after committing the results to the vuex store, calling the APIs through a dispatch, that this became an issue.
  
  – John Snow
  Mar 26 at 18:00
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hmm then I guess it is due to big data coming from HTTP calls and reactivity. I had a case with 2k+ items and solved it by referencing only a subset of those in vue/vuex - storing the data in a global or component non reactivly.
  
  – Estradiaz
  Mar 26 at 21:03
  

  
  
  
  

add a comment | 

I have a function that I'm calling in a component template. It reacts on changes in a vue-select component.

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

...

</template>
<script>

...

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

This selectedEvent action that is being dispatched contains many HTTP calls, commits to the store, and calls to other actions. The issue is that once this has been called, the UI completely locks and doesn't update until about halfway through the function.

How should I call an action that will commit (mutate), and dispatch other actions, and not lock the UI?

Update

The problem has disappeared in our production build and only exists when we have development mode enabled.

user-interface vue.js electron vuex

share|improve this question

edited Apr 16 at 3:55

John Snow

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

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

...

</template>
<script>

...

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

share|improve this question

edited Apr 16 at 3:55

John Snow

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

share|improve this question

edited Apr 16 at 3:55

John Snow

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

asked Mar 26 at 5:21

John SnowJohn Snow

6151212 silver badges2727 bronze badges

1 Answer
1

active

oldest

votes

0

If vuex observer/ reactivity is the reason for the ui block one can simply freeze big objects to prevent reactivity:

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

share|improve this answer

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55350339%2flong-action-is-locking-renderer-process%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

If vuex observer/ reactivity is the reason for the ui block one can simply freeze big objects to prevent reactivity:

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

share|improve this answer

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

add a comment | 

0

If vuex observer/ reactivity is the reason for the ui block one can simply freeze big objects to prevent reactivity:

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

share|improve this answer

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

add a comment | 

If vuex observer/ reactivity is the reason for the ui block one can simply freeze big objects to prevent reactivity:

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

share|improve this answer

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

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

share|improve this answer

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges

answered Mar 26 at 21:26

EstradiazEstradiaz

78311 silver badge1010 bronze badges