Vuex / Vue-Router - Passing auth:user id from vuex store to vue-router router-link params

Question

Is it possible to pass the current logged in user's id to the params of a router link?

This is my current code and I want to render information in a page based on the params id

routes.js

  { 
    path: '/objective/employee/:id', 
    name: 'employee-objective', 
    component: () => import('@/views/EmployeeObjective'),
    meta: { requiresAuth: true }
  },

Component.vue

    created () {
      this.$store.dispatch('authUserInformation')
    },

    computed: {
      loggedIn () {
        return this.$store.getters.loggedIn
      },
      authUser () {
        return this.$store.state.authUser
      }
    }

router-link

<router-link :to="{ name: 'employee-objective', 
params: { 
  id: // this.$store.state.authUser <- does not work
      // authUser[0].id <- does not also work
}}">
Click Here
</router-link>

Answer 1

The problem seems to be in accessing store because by default, this.$store is injected to components so you can just use $store in templates, which then should be:

<router-link :to="{ name: 'employee-objective', params: { id: $store.state.authUser }}">

However, in accessing store state values, the recommended way is to use vuex's mapState Helper.

computed: {
  ...mapState([
    // map this.authUser to store.state.authUser 
    'authUser '
  ])
}

and so you can use this as so:

<router-link :to="{ name: 'employee-objective', params: { id: authUser }}">