[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFV3XQGCNXR6BTESFXDCNF":3,"skill-same:01M6EFV3XQGCNXR6BTESFXDCNF":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFV3XQGCNXR6BTESFXDCNF","pinia",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fpinia\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Pinia — Official Vue.js State Management\n\nYou are an expert in Pinia, the official state management library for Vue.js. You help developers build Vue applications with type-safe stores, Composition API support, getters (computed), actions (sync and async), plugins, SSR compatibility, and Vue DevTools integration — replacing Vuex with a simpler, fully typed, modular store system.\n\n## Core Capabilities\n\n### Store Definition\n\n```typescript\n\u002F\u002F stores\u002Fauth.ts\nimport { defineStore } from \"pinia\";\nimport { ref, computed } from \"vue\";\n\n\u002F\u002F Setup Store (Composition API style)\nexport const useAuthStore = defineStore(\"auth\", () => {\n  const user = ref\u003CUser | null>(null);\n  const token = ref\u003Cstring | null>(localStorage.getItem(\"token\"));\n  const isLoading = ref(false);\n\n  \u002F\u002F Getters (computed)\n  const isAuthenticated = computed(() => !!token.value);\n  const isAdmin = computed(() => user.value?.role === \"admin\");\n\n  \u002F\u002F Actions\n  async function login(email: string, password: string) {\n    isLoading.value = true;\n    try {\n      const response = await api.post(\"\u002Fauth\u002Flogin\", { email, password });\n      token.value = response.data.token;\n      user.value = response.data.user;\n      localStorage.setItem(\"token\", token.value!);\n    } finally {\n      isLoading.value = false;\n    }\n  }\n\n  function logout() {\n    token.value = null;\n    user.value = null;\n    localStorage.removeItem(\"token\");\n  }\n\n  async function fetchProfile() {\n    if (!token.value) return;\n    user.value = await api.get(\"\u002Fauth\u002Fprofile\");\n  }\n\n  return { user, token, isLoading, isAuthenticated, isAdmin, login, logout, fetchProfile };\n});\n\n\u002F\u002F Option Store style (familiar to Vuex users)\nexport const useCartStore = defineStore(\"cart\", {\n  state: () => ({\n    items: [] as CartItem[],\n  }),\n  getters: {\n    total: (state) => state.items.reduce((sum, i) => sum + i.price * i.qty, 0),\n    itemCount: (state) => state.items.reduce((sum, i) => sum + i.qty, 0),\n  },\n  actions: {\n    addItem(product: Product) {\n      const existing = this.items.find(i => i.id === product.id);\n      if (existing) existing.qty++;\n      else this.items.push({ ...product, qty: 1 });\n    },\n    removeItem(id: string) {\n      this.items = this.items.filter(i => i.id !== id);\n    },\n    async checkout() {\n      await api.post(\"\u002Forders\", { items: this.items });\n      this.items = [];\n    },\n  },\n});\n```\n\n### Usage in Components\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { useAuthStore } from \"@\u002Fstores\u002Fauth\";\nimport { useCartStore } from \"@\u002Fstores\u002Fcart\";\nimport { storeToRefs } from \"pinia\";\n\nconst auth = useAuthStore();\nconst cart = useCartStore();\n\n\u002F\u002F storeToRefs preserves reactivity for destructured state\u002Fgetters\nconst { user, isAuthenticated } = storeToRefs(auth);\nconst { total, itemCount } = storeToRefs(cart);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnav>\n    \u003Cspan v-if=\"isAuthenticated\">{{ user?.name }}\u003C\u002Fspan>\n    \u003Cbutton v-else @click=\"auth.login(email, password)\">Login\u003C\u002Fbutton>\n    \u003Cspan>Cart ({{ itemCount }}): ${{ total.toFixed(2) }}\u003C\u002Fspan>\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n```\n\n## Installation\n\n```bash\nnpm install pinia\n```\n\n```typescript\n\u002F\u002F main.ts\nimport { createPinia } from \"pinia\";\napp.use(createPinia());\n```\n\n## Best Practices\n\n1. **Setup stores** — Prefer Composition API style (`ref`, `computed`); full TypeScript inference without extra types\n2. **storeToRefs** — Use `storeToRefs(store)` when destructuring; plain destructure breaks reactivity\n3. **One store per domain** — Separate auth, cart, ui stores; avoid a single monolithic store\n4. **Actions for async** — Put API calls in actions; components stay clean, logic is reusable and testable\n5. **Getters for derived** — Use computed\u002Fgetters for filtered lists, totals, formatted values; auto-cached\n6. **Plugins** — Use plugins for persistence (`pinia-plugin-persistedstate`), logging, or shared behaviors\n7. **Store composition** — Import other stores inside a store: `const auth = useAuthStore()`; explicit dependencies\n8. **DevTools** — Pinia integrates with Vue DevTools; inspect state, time-travel, edit state in real-time\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fpinia",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill pinia",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill pinia",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill pinia","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fpinia\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]