{"library":"pinia","title":"Pinia: The Intuitive Store for Vue","description":"Pinia is an intuitive, type-safe, and flexible state management library specifically designed for Vue.js applications. It serves as a lightweight and robust alternative to Vuex, leveraging Vue 3's Composition API for a more modern and streamlined development experience. The current stable major version is v3.x, with the latest release being v3.0.4, indicating active maintenance and minor updates within the major release. Pinia distinguishes itself through its excellent TypeScript support, providing strong type inference out-of-the-box, automatic module generation (no need for nested modules), and a plugin system. Its API is designed to be straightforward and familiar to Vue developers, making state management less verbose and more declarative. Releases within a major version (like v3.0.x) typically include bug fixes and minor improvements, with major version bumps (v2 to v3) often aligning with Vue major version releases and dropping support for older ecosystems (e.g., Vue 2).","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install pinia"],"cli":null},"imports":["import { createPinia } from 'pinia'","import { defineStore } from 'pinia'","import type { Store } from 'pinia'","import { useMyStore } from './stores/myStore'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createApp } from 'vue';\nimport { createPinia, defineStore } from 'pinia';\n\nconst app = createApp({\n  template: `\n    <div>\n      <h1>Counter: {{ counter }}</h1>\n      <p>Double Counter: {{ doubleCounter }}</p>\n      <button @click=\"increment\">Increment</button>\n      <button @click=\"reset\">Reset</button>\n    </div>\n  `,\n  setup() {\n    const main = useMainStore();\n    return {\n      counter: main.counter,\n      doubleCounter: main.doubleCounter,\n      increment: main.increment,\n      reset: main.reset\n    };\n  }\n});\n\n// Define a Pinia store\nconst useMainStore = defineStore('main', {\n  state: () => ({\n    counter: 0,\n    name: 'Pinia Example'\n  }),\n  getters: {\n    doubleCounter: (state) => state.counter * 2\n  },\n  actions: {\n    increment() {\n      this.counter++;\n    },\n    reset() {\n      this.counter = 0;\n    }\n  }\n});\n\nconst pinia = createPinia();\napp.use(pinia);\napp.mount('#app');\n\n// To make it runnable in a simple environment, assume an #app div exists:\ndocument.body.innerHTML = '<div id=\"app\"></div>';\n","lang":"typescript","description":"This quickstart demonstrates how to set up Pinia in a Vue 3 application, define a basic store with state, getters, and actions, and use it within a Vue component.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}