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

Question

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.

From the sound of it, you're breaking the one-source-of-truth principle, as you're trying to store the same thing in more than one place. The purpose of using vuex is to not have to do that. Everything is in sync without you having to do anything. What you posted is not enough to understand the exact technical issue you're having. Consider creating a *runnable* [mcve] (in codesandbox.io or similar). Also state in clear the exact sequence of actions and the expected result. — tao, Jan 23 '22 at 18:59
In general, it's not good practice to keep the current page stored in the store, as you already have it, as `$route`. If you still prefer to have it in the store, you can always write a store getter which reads it from `$route`. If you also want the ability to set the page/route from the store, you could write an action/mutation which would use `$router.push()` internally. I think an `action` would be more appropriate, but it can be done using a mutation as well. — tao, Jan 23 '22 at 19:31

score 3 · Accepted Answer · answered Jan 23 '22 at 19:44

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

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

1 Answers1