First time using a store causes (wasteful?) re-render

[mgussekloo]

Hi! Using any store for the first time in a computed property means that property gets computed twice: once before the "Store installed" console message, and once after. I have no way to prevent the re-render, except by explicitly loading the store beforehand (which feels odd).

Am I doing this right, or should I improve my code?
Is the re-render wasteful, or is it not that important?

Thanks for any help, and for a great library.

[posva]

if you are donig const store = computed(() => useStore()), yeah, that's wrong usage. You should do:

const store = useStore()

instead

https://pinia.vuejs.org/core-concepts/#using-the-store

[mgussekloo]

Hi, thanks for checking out my question, I'd like to explain myself a bit better.

This is my component:

import { mapState } from 'pinia';
import { useCharacterStore } from '@/stores/character';

export default {
    computed: {
        name() {
            console.log("name compute");
            const character = useCharacterStore();
            return character.name;
        }
    }
}

Now when I run this in the browser, console log says the following:

app.js?ver=sept2021:143 name compute
app.js?ver=sept2021:35727 🍍 "character" store installed 🆕
app.js?ver=sept2021:143 name compute

The phrase "name compute" is logged twice, once before the store is installed, once after.
Is this normal behavior?

PS.
I tried using mapState(), but the result is the same.

Thanks again!

[posva]

Is this what you tried: https://pinia.vuejs.org/core-concepts/state.html#usage-with-the-options-api

You can also try mapStores() with the options api but you shouldn't call useStore() within a computed.

[mgussekloo]

Ok, gotcha. I tried changing my code to match the documentation, and I tried mapStores(), but it's doing the same thing.

 computed: {
        // name() {
        //     const character = useCharacterStore();
        //     console.log(character.name, "name compute");
        //     return character.name;
        // }
        ...mapState(useCharacterStore, {
            name(store) {
                const name = store.name;
                console.log("compute name");

                return name;
            }
        })
    }

But it's the same thing:

app.js?ver=sept2021:160 compute name
app.js?ver=sept2021:35815 🍍 "character" store installed 🆕
app.js?ver=sept2021:160 compute name

Then I tried with

    computed: {
        // name() {
        //     const character = useCharacterStore();
        //     console.log(character.name, "name compute");
        //     return character.name;
        // }
        ...mapStores(useCharacterStore),
        name() {
            console.log("compute name");
            return this.characterStore.name;
        }
    }

I'm not loading any data or something, the store is just a very basic one...

defineStore('character', {
	state: () => ({
		id: -1,
		name: 'Fred',
		characterImage: false,
	})
})

Sincere apologies if I'm just misunderstanding something very basic here.

[mgussekloo]

After looking at the Pinia source code, I think the issue comes fom Devtools being open. If Devtools is not open, the component is not rendered twice. See this plugin.ts code, which triggers an update inside a method explicitly called "addStoreToDevtools".

Sorry for the confusion. Hopefully this info will benefit someone in the future, or lead to a small caveat in the docs about the side effects of having Devtools open.