[Vuejs]-Vue/vuex: Can you re-render a page from another page?

3πŸ‘

βœ…

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

πŸ‘€Andrei Petrov

Leave a comment