Vuejs, why is this.$store.state.route.params.activityId undefined when I access it in store module

Question

I need to set the currentId in the store. I have it in the component, everything fine in the console:

async created() {
    const activityId = await this.$store.state.route.params.activityId
    activityId: 'activityId'
    console.log("here activityId: ", activityId)
    console.log('print all params: ', this.$store.state.route.params)
    console.log("STORE: ", this.$store.state)
  },

I've organised the store in modules, the one I'm working on is activity.js and it's working fine (I have all the activities saved in the store). I now need to set the current id and then set the single activity according to it (so I can access its data). Removing the non inherent code, what I have is:

import {
  activityId
} from '@/views/ActivityDetail'

const state = {
  currentActivityId: activityId
}

const mutations = {
  SET_CURRENT_ACTIVITY_ID: (state, currentActivityId) => {
    state.currentActivityId = currentActivityId
  }
}

const actions = {
  setCurrentActivityId({
    commit
  }) {
    return new Promise(resolve => {
      commit('SET_CURRENT_ACTIVITY_ID', '')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

In the module 'getters' I have, among the others (that are working fine):

activityId: state => state.activity.activityId,

Still activityId: undefined

I have sync (store, router) working, also mode: 'history' in the router, because before this I tried:

import {router} from '@/router'
const state = {
  currentActivityId: router.currentRoute.params.activityId,
}

I didn't do any change regarding the mode: history, so I don't know if the problem can be found here. But commenting it and making use of the currentRoute did not solve the problem.

The versions installed in my app are: "vue-router": "3.0.6", "vuex": "^3.1.0", "vuex-router-sync": "^5.0.0"

Still activityId: undefined Can anyone help, please? Thank you

Answer 1

I solved the issue. I didn't actually use the currentActivityId to save the single activity. Here is what I did: in the template with all the activities, I modified the button like this:

<b-button
  v-b-tooltip.hover
  title="Mostra dettagli"
  variant="info"
  class="px-3"
  @click="goToDetailActivity((data.item), selectActivity(data.item))"
>

Now the button @click for the clicked activity triggers these two methods:

selectActivity(activity) {
      let currentActivity = activity;
      currentActivity = this.$store.getters.currentActivity;
      return currentActivity;
    },
    goToDetailActivity(activity) {
      console.log('OBJECT activity sent from all activities to detail: ', activity)
      const activityData = {
        activity: activity
      }
      console.log('ACTIVITY DATA IN ALL: ', activityData)
      this.loading = true
      this.$store.dispatch('activity/setCurrentActivity', activityData).then(() => {
        this.$router.push({
          name: 'DettaglioAttivita',
          params: {
            activityId: activity.id
          }
        })
        this.loading = false
      }).catch((err) => {
        console.log('ERROR IN fetching activityData: ', err)
        this.loading = false
      })
    }

In the getters module:

currentActivity: state => state.activity.currentActivity

In store/activity.js: -state:

currentActivity: ''

-mutations:

SET_CURRENT_ACTIVITY: (state, activityData) => {
    state.currentActivity = activityData
  }

-actions:

setCurrentActivity({ commit }, activityData) {
    commit('SET_CURRENT_ACTIVITY', activityData)
  }

I needed the payolad (activityData) to pass the data. And obviously rethink the entire thing. Now it works. If I refresh the page, though, I loose all the data. I'm dealing with it with the vuex-persitedstate plugin. But this is another story. Thank you to anyone who took the time to have a look at it.