CODEWITHSUNDEEP
vuejs2vue-componentvuexvue-routervuex-modules
user6728767
user6728767

Reputation: 1243

Vue component being destroyed twice

Upon logout, my component's destroy lifecycle hooks are called. Logging in from the same browser session that just logged out will cause that same component to be destroyed again before a new instance is created/mounted. This is cause issues with the library i'm using on that component.

Ex:

First login:

Component Created ID1
Component Mounted ID1 Then logout:
Component Before Destroy ID1
Component Destroyed ID1 So everything so far is correct. Now log back in as a different user:
Component Created ID1
Component Mounted ID1
Component Before Destroy ID 1 
(Library fails to destroy here because things are now undefined from previous destroy
Component Destroyed ID1
Component Created ID2
Component Mounted ID2

My code is doing a logout by using a vuex function. We're basically dispatching an event that does a deepClone of a clean 'default object to clear out the many vuex modules we have' Then it does a router.push to the logout screen

I noticed that ALL our components are creating/mounting in this fashion. My component happens to fail because the library tries to access something it deleted in the last destroy.

I took out all our Keep-alives and it still occurs. Do you guys know if this lifecycle behavior is normal? It seems odd to me.

EDIT:

So I found the culprit. In our App.Vue we have a <router-view v-else>. Vue renders my component when I sign in then since the v-else fails, it tears it back down until the v-else is true again.

I tried the v-if but it doesn't seem to work.

Upvotes: 1

Views: 838

Answers (1)

user6728767
user6728767

Reputation: 1243

I changed it to a v-show and it fixed the issue. Vue will just hide the component with css instead of tearing it down and remounting it.

Upvotes: 1

Related Questions