State not reactive when updating from external function

Maybe I’m using it wrong, but I thought something like this should work:

// component.vue

import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const app = useAppStore();

    const loading = app.state.loading;

    return { loading };
  })
});

// external function

function startLoading() {
    const app = useAppStore();
    app.state.loading = true;
}

Whenever this external function is called, my component doesn’t update based on the state change. Only if I wrap the state in toRefs does it update correctly when being changed “from the outside”:

import { defineComponent, toRefs } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const app = useAppStore();

    // now it updates correctly when startLoading() is called somewhere else
    const loading = toRefs(app.state).loading;
    return { loading };
  })
});

Am I misunderstanding something here, or is this a bug?

I made a CodeSandbox with an example: https://codesandbox.io/s/pinia-example-rbb44

[rijkvanzanten]

Thanks for that insight. On second thought, that makes total sense 👍

Moving forward, I’ll be using

const { loading } = toRefs(app.state);

which seems to be working as expected 🙂

[hjJunior]

Something important to notice, even using storeToRefs I was facing same issue, the problem was the spread operator I was using to separate functions

Wrong way:

    const { login, ...store }= useAuthStore();
    const { user, isAuthenticated } = storeToRefs(store);

Correct way:

    const store = useAuthStore();
    const { user, isAuthenticated } = storeToRefs(store);
    const { login } = store;