Fixing a shopping cart bug at 2 AM
The screen flickered, and my third cup of coffee had gone cold. That was my reality when facing a “ghost” bug on an e-commerce site: the shopping cart suddenly emptied when the user switched pages. After 3 hours of tracing back through the code, I realized the project was trapped in the Prop Drilling nightmare.
User data had to travel a treacherous path: from App.vue down to Layout, through Header, into Navbar, and finally to CartWidget. If just one link in the chain forgot to handle an emit or passed the wrong data type, the entire logic collapsed like dominoes.
In my most recent project with a team of five, I pivoted to using Pinia combined with TypeScript. The results were impressive: the speed of developing new features increased by about 30%. Minor data bugs almost vanished because everything was strictly controlled from the moment we started typing.
Why do old state management methods often fail?
The problem isn’t with Vue 3. It’s in how we organize data as the application begins to swell. The three biggest hurdles include:
- Distributed data: Component A changes but Component B has no idea. This leads to UI inconsistencies.
- Maintenance burden: Passing props through 4-5 intermediate layers makes the code extremely messy. When you need to add a new field, you have to refactor every component along the transmission path.
- Runtime risks: With pure JavaScript, you can’t be sure if
user.idexists. Apps often crash unexpectedly in the customer’s browser just because of anundefinedvalue.
Looking back at previous solutions
I’ve tried many approaches, but they all had their own weaknesses:
- Event Bus: A total mess. In large projects, you’ll never know who is firing an event and who is listening.
- Vuex: Once the gold standard, but too verbose. Having to write separate Mutations, Actions, and Getters makes files bloated. Notably, Vuex’s TypeScript support is poor.
- Provide/Inject: Suitable for small apps. However, it lacks crucial supporting tools like DevTools or the ability to debug state over time.
The Power Combo: Vue 3 + Pinia + TypeScript
Pinia is currently the optimal choice for production projects. It weighs only about 1.5kb (many times lighter than Vuex) and has an API that feels very natural to the Composition API.
1. Initializing the project with Vite
Instead of the outdated Vue CLI, use Vite to enjoy lightning-fast build speeds. Open your terminal and run the following commands:
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install pinia2. Optimizing Alias Configuration
Don’t let your code be riddled with ../../../../ paths. Open vite.config.ts and set up the @ alias to point directly to the src directory:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})Note: You need to update compilerOptions.paths in tsconfig.json so that TypeScript recognizes this @ character.
3. Defining Stores the Modern Way
Instead of using the Options API, I recommend using Setup Stores. This method helps you group logic extremely effectively.
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
interface UserProfile {
id: number
name: string
email: string
}
export const useUserStore = defineStore('user', () => {
const profile = ref<UserProfile | null>(null)
const isLoading = ref(false)
const isLoggedIn = computed(() => !!profile.value)
async function fetchUser(id: number) {
isLoading.value = true
try {
const response = await fetch(`https://api.example.com/users/${id}`)
profile.value = await response.json()
} catch (error) {
console.error('API Error:', error)
} finally {
isLoading.value = false
}
}
return { profile, isLoading, isLoggedIn, fetchUser }
})The biggest benefit here is the Auto-complete feature. When you type userStore.profile., VS Code will suggest the exact fields. This completely eliminates silly typos.
4. Using the Store in Components
Data retrieval is now very clean. You can call the Store anywhere without worrying about component hierarchy.
<script setup lang="ts">
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const loadData = () => userStore.fetchUser(1)
</script>
<template>
<div v-if="userStore.isLoading">Loading...</div>
<div v-else>
<h1>Hello {{ userStore.profile?.name }}</h1>
<button @click="loadData">Load Data</button>
</div>
</template>Real-world experience for Production environments
To make an application truly stable, just installing Pinia isn’t enough. Here are 3 techniques I always apply:
State Persistence: Users will be very annoyed if they refresh the page and their cart disappears. Use pinia-plugin-persistedstate to automatically sync data to LocalStorage.
Divide and Conquer (Modularization): Don’t create a giant store. Break it down into authStore, cartStore, and productStore. Pinia allows these stores to call each other very flexibly.
Validate API data: TypeScript only protects you during coding. Real data from an API can be inconsistent. Use the Zod library to validate data types as soon as you receive a response from the server.
Conclusion
Looking back at those sleepless nights fixing bugs, I’ve learned a lesson: investing in architecture from the start is always cheaper than cleaning up a mess later. Pinia and TypeScript aren’t just tools; they are the framework that makes your project more sustainable.
If you’re starting a Vue 3 project, go with the trio of Vite – Pinia – TypeScript. You might spend a bit more time defining Interfaces initially, but as the project expands to hundreds of components, you’ll see the value of this discipline.
