Should state be an object returned by a function and what are the benefits?

[jordyvandomselaar]

In the docs we can see this snippet:

function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }

But this also works:

const dropdown = {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }

Are there benefits to using a function or is using a plain object fine as well?

[ryangjchandler]

@jordyvandomselaar - using a function ensures that the component gets a fresh set of data when being created, similar to how Vue uses a data() function that returns an object.

The function approach also allows you to compose the data, meaning you could have x-data="dropdown('arg1', 'arg2')" and then use those arguments in your object.

[jordyvandomselaar]

@ryangjchandler that makes sense! Thank you for the quick reply!