0

I need a single component to share its state between all its instances in the site. I could have sworn there was a very simple way to do this in vue 2. This is not the same as this because they want a single instance of a class within all vue components, which makes sense to bury it in the Vue prototype chain.

This is different because I want multiple instances of the same component to share the same data. Normally, I would handle this with a store, but again, I could have sworn there was a very simple way to do this in vue 2 to the point that tutorials used to start you off creating singletons, and then explain how to make those singletons protect their own instance's data.

This IS the same question as this, but unfortunately, it was linked back to the first link i posted, which does not adequately answer this question for the reasons I've laid out.

Can anyone help me remember this particular syntax?

what it definitely is not (normal non-singleton pattern):

        data() {
            return {
                key: 'value'
            }
        }

what i thought it was, but is currently not working as expected:

        data: {
                key: 'value'
        }

what it's doing when i try what i thought: when i go to my site and interact with one instance of the component, other instances on other pages do not maintain the singleton state (they maintain their own state somehow). this is an spa, so reloading is not coming into play to reset the state.

there must be a third pattern, but I'm just not remembering it. I tried googling old tutorials as well, and everything seems to have updated to not show you how to create singleton instances of components. Any help is greatly appreciated!

bearaxe
  • 3
  • 2
  • This is the case for global state, not singleton component state. If you use 2.7 that supports composition api, it can be easily used here https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api – Estus Flask Apr 28 '23 at 18:25
  • ahh of course, that's probably why all the tutorials changed, due to creating misconceptions that global state is the same as a singleton component state. That fully explains everything to me, and it sounds like my personal best bet here is to use a store instead. If you post this as the answer, I will accept it. Thank you so much! – bearaxe Apr 28 '23 at 18:38

0 Answers0