How to have data shared between Vue3 single file component instances?

Question

I don't need to pass data between a parent component to a child one or the opposite, I need something like php/c static variables.

I want my sfc (single file component) to have some data that is shared among all instances in in the page.

As far as I understand that's why in sfc we define data as a function

export default {
    data(){
        return {
            // props here
        };
    }
}

while in page scripts we can define it as an object

const app = new Vue({
    data: {
        // props here
    },
}

That's because since we can have multiple instances of a sfc in the page defining its data as a function make each instance to execute in and get its own data, while with page script we can have a singe instance.

I need to define some of my sfc data to be shared between component instances, while other data to be per-instance.

Is there a way to do this?

Igor Moraru · Accepted Answer · 2021-09-24 15:48:37Z

1

That depends on the data to be defined, its complexity, and purpose.

If these are 2 or 3 readonly variables, they can be set as global properties using Vue.prototype (Vue 2) or app.config.globalProperties (Vue 3). I'm not sure, because in your example you use Vue 2 syntax.

If the data should be reactive, you can set up a simple state management as explained in the Vue documentation: Simple state management.

If the data is more complex than that, the next step will be Vuex.

answered Sep 24, 2021 at 15:48

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

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

1 Comment

fudo Over a year ago

The simple state management seems the best option, but i can't figure out how to implement it in a single file component, every example i found use plain js and not sfc; can you point me in the right direction?

fudo · Accepted Answer · 2021-09-25 13:05:11Z

0

Following @Igor answer I looked after the simple state management and found the ref() method that creates reactive primitive values.

In my specific use case I needed to share among all the sfc instances just an array, so in my sfc I had:

const reactive_array = ref([]);

export default {
    data() {
        return {
            shared_array: reactive_array,
        };
    },
};

answered Sep 25, 2021 at 13:05

fudo

3,0349 gold badges31 silver badges73 bronze badges

Collectives™ on Stack Overflow

How to have data shared between Vue3 single file component instances?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related