Is the Vue reactive Method used in the Main Example redundant?

[1sd15]

Hey all!

The example that I am referring to is this one here: https://github.com/vuejs/petite-vue#global-state-management.
I found that, whilst developing a Petite app, I didn't actually need to make my object reactive() for it to work with DOM updates.
After some investigating I found that Petite makes any and all objects passed to it reactive (Fig 1)

My question is: Is the reactive method used in the Main Example a redundant usecase?
Petite will run reactive on the store variable as soon as the app is created.
This means that the reactive method ran earlier isn't actually changing anything?

Let me know if I'm got my wires crossed or have misunderstood the example!

(Fig 1)

Thanks!

[halivert]

It's not redundant, the purpose of the reactive part in there is to have a "global state management", so with this example you can use the same reactive part in two different applications in the same page.

There's a comment in the example where you can see, the user can update that value outside the createApp.

[1sd15]

Hmm do you mind giving me a little more advice?
I'm a little lost with that example on the readme.

I believe that JS objects will refer to the correct property due to pointers/references.
It's the Vue DOM that needs updating when a property is changed.
Hence the need for getters and setters (which the reactive method crawls and sets).

I've recreated this example (the example in the documentation only shows one createApp; I've made two) and omitted the reactive wrapper.
https://codepen.io/1sd15/pen/gOjQRwe?editors=1010

The inc called outside of the createApp will affect the original object due to reference (it's basically a getter)
The first createApp that runs will make the original object reactive with getters and setters due to references.
Then the next createApp will use the existing getters and setters; affecting the original object?

Thanks!

[halivert]

Yes, I've created a pen with an edge case showing why reactive is needed when you want to manage a global state
https://codepen.io/halivert/pen/BaPGZrG

In this example you need to toggle the GLOBAL variable from true to false and otherwise
In global case, you can see the inc function updates the UI, but in the non global it doesn't, you can also see the console logs to see that the value is actually updating in both cases, I hope this clarify you the use, but feel free to comment if you need a bigger case 👍🏽

[1sd15]

Thank you so much @halivert !
That codepen was really helpful and helped reassure it's functionality.
It would be nice to update the example within the README to show an edge case; like you've done.

Your edge case shows the inc method outside of the store variable which makes sense as to why we need to make it reactive.
I believe the nesting of the inc method on the original example is what threw me off.

This circles back around to my original question of, is that exact example in the README redundant, as the inc method works natively?
It looks to me like the inc needs to not be nested in order to make that example realistic and relevant?