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

Question

Sorry for the somewhat clumsy wording of the question. I'm a bit uncertain how to phrase it perfectly so feel free to suggest an alteration.

I have a menu system where clicking on a link loads data to the store (it dispatches a command for it to the store and tells it what kind of data that should be loaded to the state variables).

menuClick: function(event) {
  const dataKind = event.target.id;
  this.$store.dispatch("updateData", { type: dataKind });
}

I also have a router like this.

import Thing1 from "./thing1.vue";
export const routes = [
    ...,
    { path: "/stuff/thing1", component: Thing1 }
];

This setup works and I'm happy with it. Or, rather, I was happy with it until a colleague pointed out that simply typing in the URL (adding a bookmark, following a link etc., anything but the actual click on the menu item) doesn't do the trick. The page is rendered as supposed to but the data isn't loaded and so we only show the message that no bananas... there.

How can I resolve it?

One approach I'm considering is hooking up the dispatch of update request to the routing event and not only on clicking in the menu. The problem is that I don't know how to technically speaking. Is it possible at all?

The second approach would be loading the data not at a click in the menu (or at least not only at the click) but at a later stage. The problem with this approach is that I have no idea where to place the update. What would be a good spot?

Are there other approaches to consider?

Why you didn't handle data loading into component ? I think there is a wrong use case with dispatching. — Belmin Bedak
– Belmin Bedak, Commented Dec 10, 2016 at 9:56
@BelminBedak Good question. I'm fairly new to the tech so I might have done it incorrectly. I've tried to follow the suggestions on their page telling me to have an external store and dispatch updates to it so that they get save in the state. Then, I have the getters that expose the state to the component. How would you suggest to approach it? — Konrad Viltersten
– Konrad Viltersten, Commented Dec 10, 2016 at 10:02
It's hard to say, but what data are you sending to store when you trigger this menuClick method ? — Belmin Bedak
– Belmin Bedak, Commented Dec 10, 2016 at 10:10
I'm only providing an ID to the store through the dispatch method. The store then will take care of the actual ajax call to fetch the data and populate the state. — Konrad Viltersten
– Konrad Viltersten, Commented Dec 10, 2016 at 10:17
Okay, so that's a bit wrong way I think.What would I do here: First you should send that ID as route params, and then in your component, you could watch that route, and get data for specific ID in component.See how I did it here github.com/bedakb/vuewp/blob/master/public/app/themes/vuewp/app/… — Belmin Bedak
– Belmin Bedak, Commented Dec 10, 2016 at 10:45

tony19 · Accepted Answer · 2022-07-16 01:34:00Z

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>

edited Jul 16, 2022 at 1:34

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 10, 2016 at 16:11

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Belmin Bedak · Accepted Answer · 2016-12-10 17:51:23Z

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
    }
}

answered Dec 10, 2016 at 17:51

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related