Vue.js 与 VueX - Vue 实例生命周期之间的内容闪烁

Question

I have a main page. When user logs in, it will detect user's web application version. If update needed, it shows an update instruction modal. Currently, due to some issues, we like to change the update instruction depends on a specific version.

For example:

In the normal situation, the update instruction shows like please update , but once detect the specific version, it will change to please contact us

The issue here is that when user logs in, if user's version is specific version, the update instruction will flash from please update to please contact us .

I tried to use the lifecycle, beforeCreated or beforeMounted to detect the version then set the instruction, but the flash still.

I think the reason caused the issue is when main page mounted, the modal mounted too. Because at that moment, the IsSpecificVersion in VueX is false , so it shows please update , then state chage, it becomes please contact us

The result I expect as below

user login==>detect==>modal only shows the content depends on the detected version

How can I set the value properly in Vue's lifecycle?

Main page

<template>
  <div class="welcome-page">
    <update-modal></update-modal>
</template>
<script>
import UpdateModal from './UpdateModal.vue'
export default {
  components: {
    UpdateModal,
 },
async beforeCreate() {
  ...
  set IsSpecificVersion to true in VueX
}
</script>

Update instruction modal

<template>
 <b-modal
   v-model="show"
 >
 <p v-if="IsSpecificVersion">please update</p>
 <p v-else>please contact us</p>
</template>
<script>
 computed: {
   show: {
    get: function () {
      return this.$store.state.isShow
    },
    set: function() {
      xxxxxx
    }
  },
  IsSpecificVersion() {
    return this.$store.state.IsSpecificVersion
  }
 }
</script>

Answer 1

It loooks like you are using css styles to control the display and hide of the modal. If this is the case, the modal will always exist on the page, and the state of vuex not have changed when you show it.

In my use, first change the state and then show the modal and it will not flash.

Perhaps you can check the order of instructions in the program to make sure that the status has changed when displayed.