I need clarifications about accessing the store actions in the return of the setup function

[stephane303]

I tried to do this with my store:

    setup() {
        const settings = useSettingsStore();
        return {
            setPlatformName : settings.setPlatformName,   // <= setPlatformName is a  simple action
        }
    }

and then calling directly setPlatformName from my component didnt' work, without any error message. I inspected the state and it was not changed.

I guess it's related to the fact that settings (store) in an object wrapped with reactive.

I had to write this:

    setup() {
        const settings = useSettingsStore();
        return {
            setPlatformName : (name:string) => settings.setPlatformName(name),   // <= setPlatformName is a  simple action
        }
    }

Where can I get more information to fully understand what is going on, thank you.

[posva]

In JS, functions using this must be called wiht the object: store.someAction(), otherwise this (the context) won't have the same value.

Just return the whole store in setup:

    setup() {
        const settings = useSettingsStore();
        return {
-            setPlatformName : settings.setPlatformName,   // <= setPlatformName is a  simple action
+            settings,
        }
    }

And then do @click="settings.setPlatformName(theName)"

You can also do

setPlatformName: settings.setPlatformName.bind(settings)

To set the this value