Router and Render: router.push and router.go for reload page

Goods!,

I have a problem, I don’t know if it is a ‘best practice’ or no.

In App.vue I have the navbar, which shows 3 items, which depend on whether a user is logged in or not, for this, I have a mapGetters that recovers the user’s status. Inside, I have a router-view in which I render the components.

When I login, I save the user in the state of the application, and redirect to home with this.router.push ({path: '/'}), but when it loads, it doesn’t launch mapGetter again to change the components of the navbar, because App.vue is not rendered as such, but what is inside the router-view, and to get it, after this.router.push ({path: '/'}), I add this.router.go(0).

I think you can do better (for sure), but I can’t think of anything else, and that’s why I prefer to ask, is it correct to do router.push and router.go in a row? Is there any better way to do it?

I think to do it with observable(vue-rx).

Thanks

App.vue

[...]
<app-navbar></app-navbar>
<main>
   <v-container class="mt-5">
      <transition name="fade">
         <router-view></router-view>
      </transition>
  </v-container>
</main>

App.vue script


@Component({
    name: 'App',
    components: {
        SideNavbar,
        SnackbarComponent,
    },
    computed: {
        ...mapGetters({
            error: 'getError',
            processing: 'processing',
            user: 'getCurrentUser',
        }),
    },
})
export default class App extends Vue {
    public sideNavbar: boolean = false;
    public error!: ErrorObject;
    public user!: User;
   
    @Action('ACT_SIGN_OUT', { namespace: 'authModule' })
    private handleSignOutUser!: () => Promise < any > ;

    [...]
    // methods
    public toogleSideNavbar(): boolean {
        this.sideNavbar = !this.sideNavbar;
        return this.sideNavbar;
    }

    private triggerSignOutUser() {
        this.handleSignOutUser().then(() => this.sideNavbar ? this.sideNavbar = false : void(0));
    }

}

Action sign in user
action.ts

async ACT_SIGN_IN_USER(context: AuthActionContext, payload: SignInUser): Promise<any> {
    return new Promise(async (resolve, reject) => {
      try {
        context.commit('startProcessing', null, { root: true });
        context.commit('SET_LOADING_BTN', true);
        const { data, errors } =
          await apolloClient.mutate({
            mutation: gqlSignInUser,
            variables: payload,
          });
        if (!errors) {
          context.commit('SET_TOKEN', data.signInUser.token);
          router.go(0);
          resolve(true);
        }
      } catch (e) {
        // tslint:disable-next-line:no-console
        // configure vue-logger
        console.error(e);
        context.commit('setError', e, { root: true });
        reject(false);
      } finally {
        context.commit('SET_LOADING_BTN', false);
      }
    });
  },