[Vuejs]-Loading data to store in Vue not working when routing from URL (works when clicking on a button)

by

1👍

✅

You can use beforeMount or any other Lifecycle Hooks, if you have to initialise some required data. You can have a method which updates the data in the store and call that same method while initialising and on menuClick.

The structure should look like following:

export default {
  components: { },
  data () {
    return {
    }
  },
  methods: {
    updateStore (value) {
      this.$store.dispatch("updateData", { type: value })
    },
    menuClick: function(event) {
      const dataKind = event.target.id
      this.updateStore( dataKind )
    }
  },
  beforeMount () {
    if(this.$route.dataKind && someOtherConditionIfNeeded){
      this.getDetails(this.$route.dataKind)
    }
  }
}
</script>
👤Saurabh

1👍

I think you should set that ID as route parameter, and then into component, you can watch route, and data would be collected when route is activated. (https://router.vuejs.org/en/advanced/data-fetching.html)

There is an example from my repo https://github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/views/PostView.vue#L56.

For VueJS 1.x users, there is a bit different way with data and route object

route: {
    data ({ to }) {
      // Triggering method, and sending route params
    }
}
👤Belmin Bedak

Leave a comment