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.

Answer 2

What I believe you are trying to do is to set the ID of a specific 'activity' in your store so you can use this ID to show more information about this 'activity' on a different page.

To set data in your store you should absolutely always use a commit(), even better if you use an action() that triggers the commit(). Do not set the state of your store directly (e.g. this.$store.state.bar = 23 <- don't do that).

Here is an example of how you could design the functionality:

// Template in 'activitySelecotr.vue'
...
<div
  v-for="activity in activities"
  :key="activity.id"
  class="activity"
>
  // other stuff
  <button @click="showMoreInfo(activity.id)">Show more Information</button>
</div>
...

computed: {
  activities() {
    return this.$store.state.allActivities;
  },
  ...
}

methods: {
  showMoreInfo(activityId) {
    this.$store.dispatch('activityModule/setCurrentActivityId', activityId);
  },
  ...
}

---

// in 'activityDetails.vue'
...
computed: {
  activityId() {
    return this.$store.state.activityModule.currentActivityId;
  },
  ...
},
created() {
  console.log("activityId: ", this.activityId);
},
...

---

// store/activityModule.js

const state = {
  ...
  currentActivityId: null,
};

const actions = {
  setCurrentActivityId({ commit }, activityId) {
    // do stuff, for example load activity data
    commit('SET_CURRENT_ACTIVITY_ID', activityId);
  },
  ...
};

const mutations = {
  SET_CURRENT_ACTIVITY_ID(state, activityId) {
    state.currentActivityId = activityId;
  },
  ...
};

Why your code is not working is hard to answer with the information you provide. But I can tell you that at least the code in your created() function is not valid JavaScript.

async created() {
  // const activityId = await this.$store.state.route.params.activityId
  // ^ why is your route stored in your store? You can do the following:
  const activityId = this.$route.params.activityId;

  activityId: 'activityId' // 'activityId' is is a const and cannot be reassigned. Also you need to reasign with '='; ':' is invalid JavaScript.
  console.log("here activityId: ", activityId)
  console.log('print all params: ', this.$store.state.route.params)
  console.log("STORE: ", this.$store.state)
},