vue/vuex: Can you re-render a page from another page?

With the first login in my app, users get a possibility to leave their address. When this address is stored, the user are pushed to their dashboard. Second login the user go straight to the dashboard.

I have 2 Vuex states that are updated with the response.data. 'Signed' leads to address page, 'Frequent' leads to 'dashboard'.

    //PROMPT.VUE    
    mounted () {        
        this.getPrompt()       
    },
    computed: {
        promptStatus () {
         return this.$store.getters.getPrompt
        }
    },
    methods: {
        async getPrompt() {
            try{
                await //GET axios etc
                // push prompt status in Store
                let value = response.data
                this.$store.commit('setPrompt', value)
                
                if (this.promptStatus === 'signed') {                        
                    this.$router.push({path: '/adres'})                    
                }
                if (this.promptStatus === 'frequent') {                 
                    this.$router.push({path: '/dashboard'})
                }

When user leaves the address I reset the vuex.state from 'signed' to 'frequent'.

                //ADRES.VUE
                //store address

                let value = 'frequent'
                this.$store.commit('setPrompt', value)
                
                
                this.$router.push({name: 'Prompt'})

The Vuex.store is refreshed. But the Prompt.vue wil not re-render with the new vuex.status. Many articles are written. Can 't find my solution. Maybe I organize my pages the wrong way.

Solution 1:

In views, it is not recommended to mutate data (call commit) outside vuex. Actions are created for these purposes (called from the component using dispatch). In your case, you need to call action "getPrompt" from the store, but process routing in the authorization component. This is more about best practice

To solve your problem, you need to make a loader when switching to dashboard. Until the data is received, you do not transfer the user to the dashboard page

Example

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "DashboardLayout",
  components: { ..., ... },
  data: () => ({
    isLoad: false
  }),
  async created() {
    this.isLoad = false;
    try {
      await this.$store.dispatch('getData');
      this.isLoad = true;
    } catch (error) {
      console.log(error)
    }
  }
});
</script>

Data is received and stored in the store in the "getData" action.

The referral to the dashboard page takes place after authorization. If authorization is invalid, the router.beforeEach handler (navigation guards) in your router/index.js should redirect back to the login page.

Learn more about layout in vuejs

Learn more about navigation guards