[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-8d356c95":3,"seo:featured-workflow:8d356c95-4d35-11f1-9bc6-00163e2b0d79:zh":84,"workflow-related-asset-8d356c95-8d356c95-4d35-11f1-9bc6-00163e2b0d79":85},{"id":4,"uuid":5,"slug":6,"title":7,"description":8,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":12,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":14,"tags":21,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":28,"asset_kind":29,"target_tools":30,"install_mode":34,"entrypoint":18,"risk_profile":35,"dependencies":37,"verification":44,"agent_metadata":47,"agent_fit":60,"trust":72,"provenance":81,"created_at":83,"updated_at":83},3043,"8d356c95-4d35-11f1-9bc6-00163e2b0d79","asset-8d356c95","Vuex — Centralized State Management for Vue.js","Vuex is the official state management library for Vue.js applications, providing a single store with mutations, actions, getters, and module support for predictable state updates.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,"en",[15],{"id":16,"step_order":17,"title":18,"description":11,"prompt_template":19,"variables":11,"depends_on":20,"expected_output":11},3606,1,"Vuex Overview","# Vuex — Centralized State Management for Vue.js\n\n## Quick Use\n```bash\nnpm install vuex@next\n```\n```js\nimport { createStore } from 'vuex'\nconst store = createStore({\n  state: { count: 0 },\n  mutations: { increment(state) { state.count++ } }\n})\n```\n\n## Introduction\nVuex is the official centralized state management library for Vue.js. It serves as a single source of truth for shared application state, enforcing a strict unidirectional data flow through mutations, actions, and getters. It integrates deeply with Vue's reactivity system and DevTools.\n\n## What Vuex Does\n- Centralizes component state in a single reactive store\n- Enforces state changes only through synchronous mutations for traceability\n- Supports asynchronous logic via actions that commit mutations\n- Provides getters for computed derived state across components\n- Enables modular store organization with namespaced modules\n\n## Architecture Overview\nVuex's store wraps Vue's reactivity: state properties become reactive, so components re-render when state changes. Mutations are synchronous functions that directly modify state and are logged by DevTools for time-travel debugging. Actions encapsulate async operations (API calls) and commit mutations when done. Modules let large apps split the store into isolated, namespaced sub-stores that compose into the root store.\n\n## Self-Hosting & Configuration\n- Install with `npm install vuex@next` for Vue 3 or `npm install vuex` for Vue 2\n- Create a store file and pass it to your Vue app via `app.use(store)`\n- Enable strict mode during development to catch direct state mutations\n- Organize large stores into module files under a `store\u002Fmodules\u002F` directory\n- Use Vuex plugins for persistence (vuex-persistedstate) or logging\n\n## Key Features\n- Time-travel debugging via Vue DevTools with mutation history snapshots\n- Strict mode throws errors when state is mutated outside mutations\n- Namespaced modules prevent naming collisions in large applications\n- Hot module replacement for store modules during development\n- Plugin system for extending store behavior (logging, persistence, sync)\n\n## Comparison with Similar Tools\n- **Pinia** — The recommended successor for Vue 3 with simpler API, better TypeScript support, and no mutations concept\n- **Redux** — Similar centralized pattern for React; more boilerplate but larger ecosystem\n- **Zustand** — Minimal React state manager; Vuex is Vue-specific with deeper integration\n- **MobX** — Observable-based; less explicit than Vuex's mutation-driven approach\n- **Jotai** — Atomic React state; Vuex manages state as a single tree\n\n## FAQ\n**Q: Should I use Vuex or Pinia for new Vue 3 projects?**\nA: The Vue team recommends Pinia for new projects. Vuex remains fully supported for existing codebases.\n\n**Q: Can Vuex work with the Vue 3 Composition API?**\nA: Yes. You can access the store via `useStore()` inside `setup()` functions.\n\n**Q: How do I persist Vuex state across page reloads?**\nA: Use the vuex-persistedstate plugin, which saves state to localStorage or sessionStorage automatically.\n\n**Q: Is Vuex suitable for small applications?**\nA: For simple cases, Vue's built-in `reactive` or `provide\u002Finject` may be enough. Vuex shines when multiple components share complex state.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvuex\n- https:\u002F\u002Fvuex.vuejs.org","0",[22],{"id":23,"name":24,"slug":25,"icon":26},12,"Configs","config","⚙️",false,"ee37a89e58146b8d66e73585a424ef50b2889d6c091f647abdf8790872bd2aaf","skill",[31,32,33],"claude_code","codex","gemini_cli","single",{"executes_code":27,"modifies_global_config":27,"requires_secrets":36,"uses_absolute_paths":27,"network_access":27},[],{"npm":38,"pip":41,"brew":42,"system":43},[39,40],"vuex","vuex@next",[],[],[],{"commands":45,"expected_files":46},[],[18],{"asset_kind":29,"target_tools":48,"install_mode":34,"entrypoint":18,"risk_profile":49,"dependencies":51,"content_hash":28,"verification":56,"inferred":59},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":50,"uses_absolute_paths":27,"network_access":27},[],{"npm":52,"pip":53,"brew":54,"system":55},[39,40],[],[],[],{"commands":57,"expected_files":58},[],[18],true,{"target":32,"score":61,"status":62,"policy":63,"why":64,"asset_kind":29,"install_mode":34},98,"native","allow",[65,66,67,68,69,70,71],"target_tools includes codex","asset_kind skill","install_mode single","markdown-only","policy allow","safe markdown-only Codex install","trust established",{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":28,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":75,"review_status":76,"signals":77},"established","hash_only",[],"unreviewed",[78,79,80],"author has published assets","content hash available","no dangerous capability badges",{"owner_uuid":9,"owner_name":10,"source_url":82,"content_hash":28,"visibility":17,"created_at":83,"updated_at":83},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-8d356c95","2026-05-11 20:33:02",null,[86,138,191,237],{"id":87,"uuid":88,"slug":89,"title":90,"description":91,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":92,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":93,"tags":94,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":96,"asset_kind":29,"target_tools":97,"install_mode":34,"entrypoint":98,"risk_profile":99,"dependencies":101,"verification":106,"agent_metadata":109,"agent_fit":121,"trust":123,"provenance":126,"created_at":128,"updated_at":129,"__relatedScore":130,"__relatedReasons":131,"__sharedTags":136},1001,"ee9540a2-3577-11f1-9bc6-00163e2b0d79","redux-predictable-global-state-management-js-apps-ee9540a2","Redux — Predictable Global State Management for JS Apps","Redux is the original predictable state container for JavaScript apps. Modern Redux uses Redux Toolkit (RTK) which reduces boilerplate 80% and includes RTK Query for server state. Still the standard for large-scale React apps.",88,[],[95],{"id":23,"name":24,"slug":25,"icon":26},"eb38c9ebaea667b130d0505bc2efe7704b45c4877c9baa37e587d039759a6dfd",[31,32,33],"SKILL.md",{"executes_code":27,"modifies_global_config":27,"requires_secrets":100,"uses_absolute_paths":27,"network_access":27},[],{"npm":102,"pip":103,"brew":104,"system":105},[],[],[],[],{"commands":107,"expected_files":108},[],[11],{"asset_kind":29,"target_tools":110,"install_mode":34,"entrypoint":98,"risk_profile":111,"dependencies":113,"content_hash":96,"verification":118},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":112,"uses_absolute_paths":27,"network_access":27},[],{"npm":114,"pip":115,"brew":116,"system":117},[],[],[],[],{"commands":119,"expected_files":120},[],[11],{"target":32,"score":61,"status":62,"policy":63,"why":122,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":96,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":124,"review_status":76,"signals":125},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":127,"content_hash":96,"visibility":17,"created_at":128,"updated_at":129},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fredux-predictable-global-state-management-js-apps-ee9540a2","2026-04-11 15:27:44","2026-05-11 18:30:02",113.92408500996737,[132,133,134,135],"topic-match","same-kind","same-target","same-author",[25,137],"configs",{"id":139,"uuid":140,"slug":141,"title":142,"description":143,"author_id":144,"author_name":145,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":146,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":147,"tags":148,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":154,"asset_kind":29,"target_tools":155,"install_mode":34,"entrypoint":156,"risk_profile":157,"dependencies":159,"verification":164,"agent_metadata":167,"agent_fit":179,"trust":181,"provenance":184,"created_at":186,"updated_at":187,"__relatedScore":188,"__relatedReasons":189,"__sharedTags":190},2380,"793b5d45-4409-11f1-9bc6-00163e2b0d79","pinia-intuitive-store-vue-js-793b5d45","Pinia — The Intuitive Store for Vue.js","Pinia is the official state management library for Vue.js, offering a type-safe, modular, and devtools-friendly store with full Composition API support and a fraction of the boilerplate of Vuex.","8a910e34-3180-11f1-9bc6-00163e2b0d79","Script Depot",77,[],[149],{"id":150,"name":151,"slug":152,"icon":153},11,"Scripts","script","📜","62dc1814f0e8ef3fd2e2ed93047b299e3e8daf661e6088e6d77372bf299021a6",[31,32,33],"Pinia",{"executes_code":27,"modifies_global_config":27,"requires_secrets":158,"uses_absolute_paths":27,"network_access":27},[],{"npm":160,"pip":161,"brew":162,"system":163},[],[],[],[],{"commands":165,"expected_files":166},[],[156],{"asset_kind":29,"target_tools":168,"install_mode":34,"entrypoint":156,"risk_profile":169,"dependencies":171,"content_hash":154,"verification":176},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":170,"uses_absolute_paths":27,"network_access":27},[],{"npm":172,"pip":173,"brew":174,"system":175},[],[],[],[],{"commands":177,"expected_files":178},[],[156],{"target":32,"score":61,"status":62,"policy":63,"why":180,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":154,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":182,"review_status":76,"signals":183},[],[78,79,80],{"owner_uuid":144,"owner_name":145,"source_url":185,"content_hash":154,"visibility":17,"created_at":186,"updated_at":187},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fpinia-intuitive-store-vue-js-793b5d45","2026-04-30 04:24:50","2026-05-11 02:52:54",106.83814190403572,[132,133,134],[],{"id":192,"uuid":193,"slug":194,"title":195,"description":196,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":197,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":198,"tags":199,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":201,"asset_kind":29,"target_tools":202,"install_mode":34,"entrypoint":98,"risk_profile":203,"dependencies":205,"verification":210,"agent_metadata":213,"agent_fit":225,"trust":227,"provenance":230,"created_at":232,"updated_at":233,"__relatedScore":234,"__relatedReasons":235,"__sharedTags":236},991,"2f0e010c-3567-11f1-9bc6-00163e2b0d79","zustand-bear-sized-state-management-react-2f0e010c","Zustand — Bear-Sized State Management for React","Zustand is a small, fast, and scalable bearbones state-management solution for React. A cozy alternative to Redux with a simple hooks API, no providers needed, and first-class TypeScript support.",81,[],[200],{"id":23,"name":24,"slug":25,"icon":26},"28278fe1e763ecbaee73afa3afb2e97d262ff23ff5c9473ff04f1e3498040fde",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":204,"uses_absolute_paths":27,"network_access":27},[],{"npm":206,"pip":207,"brew":208,"system":209},[],[],[],[],{"commands":211,"expected_files":212},[],[11],{"asset_kind":29,"target_tools":214,"install_mode":34,"entrypoint":98,"risk_profile":215,"dependencies":217,"content_hash":201,"verification":222},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":216,"uses_absolute_paths":27,"network_access":27},[],{"npm":218,"pip":219,"brew":220,"system":221},[],[],[],[],{"commands":223,"expected_files":224},[],[11],{"target":32,"score":61,"status":62,"policy":63,"why":226,"asset_kind":29,"install_mode":34},[65,66,67,68,69,70,71],{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":201,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":228,"review_status":76,"signals":229},[],[78,79,80],{"owner_uuid":9,"owner_name":10,"source_url":231,"content_hash":201,"visibility":17,"created_at":232,"updated_at":233},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fzustand-bear-sized-state-management-react-2f0e010c","2026-04-11 13:27:51","2026-05-11 19:07:44",105.87072077857557,[132,133,134,135],[25,137],{"id":238,"uuid":239,"slug":240,"title":241,"description":242,"author_id":144,"author_name":145,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":243,"parent_id":12,"parent_uuid":11,"lang_type":13,"steps":244,"tags":245,"has_voted":27,"visibility":17,"share_token":11,"is_featured":12,"content_hash":247,"asset_kind":29,"target_tools":248,"install_mode":34,"entrypoint":98,"risk_profile":249,"dependencies":251,"verification":256,"agent_metadata":259,"agent_fit":271,"trust":278,"provenance":282,"created_at":284,"updated_at":285,"__relatedScore":286,"__relatedReasons":287,"__sharedTags":288},986,"26726f79-355f-11f1-9bc6-00163e2b0d79","tanstack-query-async-state-data-fetching-web-26726f79","TanStack Query — Async State & Data Fetching for the Web","TanStack Query (formerly React Query) is a powerful asynchronous state management library for TS\u002FJS that handles server-state, caching, background updates, and data synchronization across React, Solid, Svelte, and Vue.",86,[],[246],{"id":150,"name":151,"slug":152,"icon":153},"e13aa4276d6241c23155e4c06edb08d9b07708de1a5a6ee10a4b007a561d3a22",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":250,"uses_absolute_paths":27,"network_access":59},[],{"npm":252,"pip":253,"brew":254,"system":255},[],[],[],[],{"commands":257,"expected_files":258},[],[11],{"asset_kind":29,"target_tools":260,"install_mode":34,"entrypoint":98,"risk_profile":261,"dependencies":263,"content_hash":247,"verification":268},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":262,"uses_absolute_paths":27,"network_access":59},[],{"npm":264,"pip":265,"brew":266,"system":267},[],[],[],[],{"commands":269,"expected_files":270},[],[11],{"target":32,"score":272,"status":273,"policy":274,"why":275,"asset_kind":29,"install_mode":34},64,"needs_confirmation","confirm",[65,66,67,276,277,71],"policy confirm","risk_profile.network_access is true",{"author_trust_level":73,"verified_publisher":27,"asset_signed_hash":247,"signature_status":74,"install_count":12,"report_count":12,"dangerous_capability_badges":279,"review_status":76,"signals":281},[280],"network_access",[78,79],{"owner_uuid":144,"owner_name":145,"source_url":283,"content_hash":247,"visibility":17,"created_at":284,"updated_at":285},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Ftanstack-query-async-state-data-fetching-web-26726f79","2026-04-11 12:30:20","2026-05-11 22:49:17",95.90927887892792,[132,133,134],[]]