Pinia Mastery: Automating Vue Store Generation

JSON to Pinia Store: Scaffolding Vue 3 State from API Shapes

Pinia is the official state management library for Vue 3, replacing Vuex with a simpler API, full TypeScript support, and Vue DevTools integration. When you have a JSON payload representing shared application state — user session data, cart contents, feature flags — generating the Pinia store from the JSON shape gives you typed state, actions, and getters as a starting point you can extend immediately.

Live Example: User Session Store

// Input JSON
{
  "user_id": "usr_4421",
  "username": "dev_guru",
  "email": "dev@example.com",
  "role": "editor",
  "is_premium": true,
  "credits": 250
}

// Generated Pinia Store
import { defineStore } from 'pinia';

export const useRootStore = defineStore('root', {
  state: () => ({
    user_id: '' as string,
    username: '' as string,
    email: '' as string,
    role: '' as string,
    is_premium: false as boolean,
    credits: 0 as number,
  }),
  actions: {
    update(data: Partial<ReturnType<typeof this.$state>>) {
      Object.assign(this, data);
    },
    reset() {
      this.$reset();
    }
  }
});

Composition API Store: The Recommended Pattern

The generated store uses the Options API format. For new projects, the Composition API setup syntax is more flexible and better integrates with composables:

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  // State — each ref() becomes a state property
  const userId = ref('');
  const username = ref('');
  const email = ref('');
  const role = ref<'admin' | 'editor' | 'viewer'>('viewer');
  const isPremium = ref(false);
  const credits = ref(0);

  // Getters — computed() becomes a getter
  const isAdmin = computed(() => role.value === 'admin');
  const displayName = computed(() => username.value || email.value);

  // Actions — plain functions become actions
  async function fetchUser(id: string) {
    const res = await fetch(`/api/users/${id}`);
    const data = await res.json();
    userId.value = data.user_id;
    username.value = data.username;
    email.value = data.email;
    role.value = data.role;
    isPremium.value = data.is_premium;
    credits.value = data.credits;
  }

  function logout() {
    userId.value = '';
    username.value = '';
    credits.value = 0;
    isPremium.value = false;
  }

  return { userId, username, email, role, isPremium, credits, isAdmin, displayName, fetchUser, logout };
});

Using the Store in Vue Components

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// storeToRefs preserves reactivity when destructuring state/getters
// (plain destructuring breaks reactivity)
const { username, isPremium, credits, isAdmin } = storeToRefs(userStore);

// Actions can be destructured directly — they're not reactive values
const { fetchUser, logout } = userStore;
</script>

<template>
  <header>
    <span>{{ username }}</span>
    <span v-if="isPremium">⭐ {{ credits }} credits</span>
    <button v-if="isAdmin" @click="logout">Logout</button>
  </header>
</template>

Persisting State with pinia-plugin-persistedstate

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia).mount('#app');

// store.ts — persist specific fields only
export const useUserStore = defineStore('user', () => {
  const userId = ref('');
  const isPremium = ref(false);
  const sessionToken = ref('');  // don't persist tokens in localStorage

  return { userId, isPremium, sessionToken };
}, {
  persist: {
    pick: ['userId', 'isPremium'],  // only these go to localStorage
  }
});

Pinia vs Vuex vs Vue Provide/Inject

• Pinia: Official Vue 3 replacement for Vuex. TypeScript-first, modular stores, DevTools support, SSR-ready. No mutations — only state + actions. The right default for all new Vue 3 projects.
• Vuex 4: The Vue 2 pattern. Works with Vue 3 but lacks Pinia's TypeScript ergonomics and composition API store format. Migrate to Pinia for new code.
• provide/inject: Built-in, zero dependencies. Fine for feature-scoped state shared between parent and child components. Lacks DevTools integration and cross-component updates can be hard to track at scale.

Frequently Asked Questions

What does storeToRefs() do and why is it needed? When you destructure a Pinia store directly (const { username } = userStore), the value loses its reactive connection — it becomes a plain string snapshot. storeToRefs() wraps each state property and getter in a ref(), so the destructured values stay reactive. Use it for state and getters; destructure actions directly.

Can I call one store from another? Yes — import and call useOtherStore() directly inside an action. Pinia handles the dependency correctly. Avoid calling stores at the module top level (outside functions); always call inside setup or actions where Pinia is already initialized.

How do Pinia stores work with Nuxt 3? Install @pinia/nuxt and add it to nuxt.config.ts modules. Stores are SSR-safe out of the box — Pinia creates a fresh store instance per request on the server. Use useNuxtApp().$pinia if you need to access the Pinia instance outside setup.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.