On gists

Pinia - defineStore with argument (each components has its own)

Vue.js

store.js Raw #

// One storage for all ...
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    function increment() {
        count.value++;
    }

    return { count, increment };
});


// Dynamic storage = each components get its own
export function useCounterStore(key) {
    return defineStore(key, () => {
        const count = ref(0);
        function increment() {
            count.value++;
        }

        return { count, increment };
    })();
}


//And more ES6 style
export const useCounterStore = key => defineStore(key, () => {
    const count = ref(0);
    const increment = () => {
        count.value++;
    };

    return { count, increment };
})();