Manage Presentation Data in Vue (Resize Events)?

2
votes

I'm working a Vue project, and I'm using Vuex to manage the applications state. I've separated out the view of the app into many small layouts, as Vue components. For example I have a layout for a header and a floating stats panel.

I've written a custom directive for affixing the stats panel. Currently, this works similar to Bootstrap where you set a value, and when the page scrolls beyond that point an affix CSS class gets added to the element. This value is based on the height of the header. As app is responsive, I would rather have this value computed from the header outerHeight property.

Now, I can think of several ways on how to accomplish this, however I'm not sure the proper Vue way to do it.

  1. I could listen for resize events and have the header update it's height in the Vuex store. However, it seems poor practice to have the store manage presentation data.
  2. I could pass the id of the header to the affix directive, and use getElementById to check the height. But this is bypassing Vue completely.
  3. I could add a method to the header to return its' height, and have the parent component that holds both the header and stats panel use that to update the affix value. This however, gets messy if header and stats don't share the same parent.

Are there any other options? What would be best practice? Thanks!

1
vue.jsvuex

1 Answers

1
votes

I would surely go with #1 - share it through Vuex. Keep in mind that Vuex is just a stage manager. There are no rules what kind of data you want to store. Furthermore, I think it would be best to use it, as more component may rely on this kind of data, and it will be the only source of truth, that is mutated in a predictable way. All other options include coupling components/instances/elements on the page, and therefore the bigger the connection between the height and the page gets, the more complex those connections will grow.

Plus it will be reactive, so just using actions/mutations you will have it updated everywhere, and therefore your page will look responsive.