Vue.js where to store non-component data properties?

Question

I am working on a project with Vue.js and I use components most of the time, but sometimes I would just like to add some Vue.js syntax without completely creating a component.

Because I do not use the render like you normally would the entire HTML content that Vue attaches to is not being overwritten, allowing me to sprinkle some Vue.js syntax on existing HTML.

new Vue({
    el: '#vue',
    name: 'Vue root',
    data: {
      store
    },
    components: {
        Example
    }
});

An example of adding some Vue.js syntax to existing HTML would be; keeping 2 inputs in sync with each other for example:

Form one on index.html

<input type="text" attributes... v-model="store.arrival">

Form two on index.html

<input type="text" attributes... v-model="store.arrival">

Before I introduced the store I got a message saying something along the lines of:

[Vue warn]: Property or method "arrival" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

This led me to introducing this store because I do not want to bloat the data property of my root component in that file by rather keep an overview of these floating in space(because they do not belong to a component) properties.

I love the ability to still add Vue syntax to existing HTML but this feels like bad practice.

Is there a better way to store these variables than in store(which can get crowded pretty fast)? Or should I actually just move everything into components? This also leads to problems because than I am forced to transform things like PHP variables to Javascript if I need them.

Hopefully it is clear what I mean, thanks for reading and I you need more info let me know.

Cheers.

I am not very clear with your expectations but I think mixins will help you. Have you looked into it? https://vuejs.org/v2/guide/mixins.html — Amresh Venugopal, Mar 02 '17 at 09:03
I don't really think that you can make something well working without sort of store.For instance the example you posted with inputs, require some initial data into vue instance for specific v-model - so you have to import store data in the Vue instance and then you can attach new property to v-model. http://stackoverflow.com/questions/42326821/i-am-using-vue-js-and-python-flask-as-my-backend-i-want-to-have-some-local-vari/42326978#42326978 — Belmin Bedak, Mar 02 '17 at 09:04

score 1 · Accepted Answer · edited Jul 16 '22 at 02:06

It seems from your question that you feel like you are doing something wrong by using the data property of your Vue and not a component, or by adding Vue directives to HTML that exists inside the element of your Vue.

There's nothing wrong with this. The getting started page for the Vue documentation does this. It's a convenient way to start integrating Vue with various web frameworks. I don't think anyone thinks this is a bad practice. And if someone does, well, who cares?

Vue.js where to store non-component data properties?

1 Answers1