What is Pinia
Pinia is Vue's official store: a central place to keep state that many components share.
In this page:
What is Pinia
When several components need the same data, passing props through many layers gets painful. A Pinia store holds that state in one place, and components read and update it directly.
Pinia replaced Vuex as the recommended library, with a simpler API, TypeScript support and DevTools integration.
Note:
Pinia is the official successor to Vuex for Vue 3.
Example: What is Pinia
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2/dist/pinia.iife.js"></script>
</head>
<body>
<div id="app">
<p>Header sees: {{ counter.count }}</p>
<p>Footer sees: {{ counter.count }}</p>
<button @click="counter.count++">Increment shared count</button>
</div>
<script>
const useCounter = Pinia.defineStore("counter", { state: () => ({ count: 0 }) });
const app = Vue.createApp({ setup() { return { counter: useCounter() }; } });
app.use(Pinia.createPinia());
app.mount("#app");
document.querySelector("button").click();
Vue.nextTick(() => console.log(document.querySelector("#app").textContent.replace(/\s+/g, " ").trim()));
</script>
</body>
</html>
<!-- Output:
Rendered: Header sees: 1Footer sees: 1Increment shared count
console: Header sees: 1Footer sees: 1Increment shared count
-->Live Example
Related Topics
Common Mistakes
- Putting all state in a store unnecessarily
- Using Vuex for new Vue 3 projects
- Mutating state outside the store without care
Chapter Summary
- A store is shared reactive state
- Pinia is the official store
- It replaced Vuex
- Great for cross-component data
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: