Pinia vs Redux/Zustand

import { createSlice } from '@reduxjs/toolkit';

const slice = createSlice({
    name: 'counter',
    initialState: { value: 0 },
    reducers: {
        increment: (state) => { state.value++; },
        reset: (state) => { state.value = 0; },
    },
});

export const { increment, reset } = slice.actions;
export default slice.reducer;

const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();

dispatch(increment());

import { create } from 'zustand';

const useCounterStore = create((set) => ({
    count: 0,
    increment: () => set(s => ({ count: s.count + 1 })),
    reset: () => set({ count: 0 }),
}));

const count = useCounterStore(s => s.count);
const increment = useCounterStore(s => s.increment);

increment();

// stores/counter.ts
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);

    function increment() {
        count.value++;
    }

    function reset() {
        count.value = 0;
    }

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

<script setup lang="ts">
const counter = useCounterStore();
</script>

<template>
    <button @click="counter.increment">{{ counter.count }}</button>
</template>

const count = ref(0);
const doubled = computed(() => count.value * 2);

function increment() { count.value++; }

return { count, doubled, increment };

const useStore = create((set, get) => ({
    count: 0,
    get doubled() { return get().count * 2; },
    increment: () => set(s => ({ count: s.count + 1 })),
}));

const slice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increment: (state) => { state.count++; },
    },
});

async function loadUsers() {
    loading.value = true;
    try {
        users.value = await api.getUsers();
    } finally {
        loading.value = false;
    }
}

const loadUsers = async () => {
    set({ loading: true });
    try {
        const users = await api.getUsers();
        set({ users });
    } finally {
        set({ loading: false });
    }
};

export const loadUsers = createAsyncThunk('users/load', async () => {
    return await api.getUsers();
});

// stores/user.ts
export const useUserStore = defineStore('user', () => { ... });

// stores/cart.ts
export const useCartStore = defineStore('cart', () => { ... });

// stores/user.ts
export const useUserStore = create(...);

// stores/cart.ts
export const useCartStore = create(...);

const store = configureStore({
    reducer: {
        user: userReducer,
        cart: cartReducer,
    },
});

export const useOrderStore = defineStore('order', () => {
    const user = useUserStore();
    const cart = useCartStore();

    function checkout() {
        if (!user.isLoggedIn) throw new Error();
        api.checkout(cart.items);
    }

    return { checkout };
});

const useOrderStore = create((set, get) => ({
    checkout: () => {
        const user = useUserStore.getState();
        if (!user.isLoggedIn) throw new Error();
    },
}));

npm install pinia-plugin-persistedstate

export const useCartStore = defineStore('cart', () => { ... }, {
    persist: true,
});

import { persist } from 'zustand/middleware';

const useStore = create(persist(
    (set) => ({ ... }),
    { name: 'cart' }
));

export const useCartStore = defineStore('cart', () => {
    const items = ref<CartItem[]>([]);
    const total = computed(() =>
        items.value.reduce((s, i) => s + i.price * i.qty, 0)
    );

    function add(product: Product) {
        const existing = items.value.find(i => i.id === product.id);
        if (existing) existing.qty++;
        else items.value.push({ ...product, qty: 1 });
    }

    return { items, total, add };
});

export const useCartStore = create((set, get) => ({
    items: [] as CartItem[],
    get total() {
        return get().items.reduce((s, i) => s + i.price * i.qty, 0);
    },
    add: (product: Product) => set(s => {
        const existing = s.items.find(i => i.id === product.id);
        if (existing) {
            return {
                items: s.items.map(i =>
                    i.id === product.id ? { ...i, qty: i.qty + 1 } : i
                ),
            };
        }
        return { items: [...s.items, { ...product, qty: 1 }] };
    }),
}));