The Complete Production SOP: How to Deploy and Run Pinia Modular State Stores & Actions with TypeScript in Autonomous AI Agents

---
name: "pinia-vue-state-management"
description: "Manage global reactive state in Vue 3 applications using official type-safe Pinia stores."
metadata:
  author: "Eduardo San Martin Morote"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create pinia store"
  - "setup store syntax pinia"
  - "persist pinia state"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.mount('#app')

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

export interface UserProfile {
  id: string
  email: string
  roles: string[]
}

export const useAuthStore = defineStore('auth', () => {
  const token = ref<string | null>(null)
  const user = ref<UserProfile | null>(null)
  const isLoading = ref<boolean>(false)

  const isAuthenticated = computed<boolean>(() => Boolean(token.value))
  const hasAdminRole = computed<boolean>(() => user.value?.roles.includes('admin') ?? false)

  async function login(credentials: { email: string; pass: string }): Promise<void> {
    isLoading.value = true
    try {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      })
      if (!res.ok) throw new Error(`Authentication failed with status ${res.status}`)
      const data = await res.json()
      token.value = data.token
      user.value = data.user
    } finally {
      isLoading.value = false
    }
  }

  function logout(): void {
    token.value = null
    user.value = null
  }

  return {
    token,
    user,
    isLoading,
    isAuthenticated,
    hasAdminRole,
    login,
    logout
  }
}, {
  persist: true
})

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

const authStore = useAuthStore()
// storeToRefs ensures reactivity is retained when destructuring state and getters
const { user, isAuthenticated, hasAdminRole, isLoading } = storeToRefs(authStore)
// Actions are bound functions and can be destructured directly
const { logout } = authStore
</script>

<template>
  <section v-if="isAuthenticated">
    <p>Welcome, {{ user?.email }}</p>
    <span v-if="hasAdminRole">Admin Privileges Active</span>
    <button :disabled="isLoading" @click="logout">Sign Out</button>
  </section>
</template>