Best Practices for Vuex Data?

I have run into numerous head-banging moments far uncharacteristic of Vue’s normal excellent syntax, data management, and really literally everything else about the framework, which I love.

It has gotten to the point where I sometimes have to watch and compute a value to get it to stick to the template, and where if I don’t explicitly define all values within a structure in the Vuex store, it explodes unceremoniously.

What I would really like is to be able to, for example, populate an object of DOM references as they mount themselves, and then refer back to them (similar to document.getElementById but with a better structure and making use of the Vue devtools).

Thanks for any input.

What you are presenting causes others to try to figure out the problem you are having. Please ask detailed questions with the code if possible.

I’m not looking for an exact answer, so I think we have a breakdown in communication. This isn’t a “help me fix my code because I’m lazy and need you to send the codes” I’m trying to understand the best practices irrespective of my own choices and mistakes, and the decision to leave out the code was intentional to avoid getting bogged-down in those mistakes.

As an example as to what I would like to be able to do, consider the following:

  1. Assign a ref=“myHtml” to any arbitrary element in Vue.
  2. Extract that element from its position and save the reference (I’m assuming that will be x.$el, but correct me if I’m wrong by all means) into Vuex.
  3. Retrieve the reference from Vuex and populate it elsewhere.

I found @LinusBorg’s Portal tool and it seems to do the job better than Vuex and is in fact probably the right tool for the job (thank you for the tool, by the way). But the original question stands because I do not know why Vuex explodes when passed an element reference.

I hope this reply does not come off as oppositional. I am not trying to be difficult, but I don’t want to color your insights with my own mistakes.

This is your answer really. Vuex is intended for state, i.e. raw data if you will. It shouldn’t be used to store references to DOM nodes - especially because Vue will change those DOM nodes during re-renders (potentially destroying the node), but that won’t necessarily be reflected within the state.

That’s a bit hard to say as we don’t know what “explodes” means. I assume you get a number of errors in your console, but as we don’t know what they are we can’t really say what the cause is.

I was assuming that it was a known fact that Vuex cannot be passed an element reference. Is this not the case?

Fiddle: https://jsfiddle.net/jamesbrndwgn/qo1tvf26/

You can pass Vuex anything you want to store in the state. So technically you can store a reference to an element (as seen in the fiddle above), but that doesn’t necessarily mean you should be doing this. So yes, you can store an element reference, but it’s an anti-pattern.