What is the difference between state and getters in Pinia?

Question

Accepted Answer

**State** — reactive data. **Getters** — computed properties.

```typescript
import { defineStore } from "pinia"

export const useCartStore = defineStore("cart", {
    state: () => ({
        items: [],
        discount: 0
    }),
    getters: {
        total: (state) => {
            return state.items.reduce((sum, item) => {
                return sum + item.price * item.quantity
            }, 0)
        },
        finalTotal(state) {
            return this.total * (1 - this.discount)
        }
    },
    actions: {
        addItem(item) {
            this.items.push(item)
        }
    }
})
```

**Key differences:**
- **State** — mutable.
- **Getters** — derived, cached.

Vue.js: What is the difference between state and getters in Pinia?