A modern state management library for Vue.

Is Pinia better than Vuex?

Yes, it is simpler and recommended.

Computed values based on state.

Vue Pinia - Learn VUEJS | Revochamp

Name: Vue Pinia
Availability: InStock
Author: Revochamp

What is Pinia?

Pinia is the official state management library for Vue, designed to replace Vuex with a simpler and more modern API.

Why Use Pinia?

Simple and intuitive API
Better TypeScript support
Lightweight and fast
DevTools integration

Install Pinia

BASHRead-only

npm install pinia

npm install pinia

Setup Pinia

JavaScriptRead-only

import { createApp } from 'vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

import { createApp } from 'vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

Create Store

JavaScriptRead-only

import { defineStore } from 'pinia';

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

import { defineStore } from 'pinia';

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

Using Store

JavaScriptRead-only

const store = useStore();
store.increment();
console.log(store.count);

const store = useStore();
store.increment();
console.log(store.count);

Core Concepts

Concept	Description
State	Reactive data
Actions	Methods to modify state
Getters	Computed values from state

Best Practices

Keep stores modular
Use actions for logic
Use getters for computed data
Avoid direct state mutation outside store

Common Mistakes

Putting too much logic in components
Not organizing stores properly
Overusing global state
Not using getters effectively

Conclusion

Pinia simplifies state management in Vue with a clean and modern approach, making applications easier to maintain and scale.

import { defineStore } from 'pinia'; export const useStore = defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++; } }, getters: { doubleCount: (state) => state.count * 2 } });

Concept

Description

State

Reactive data

Actions

Methods to modify state

Getters

Computed values from state

Vue Pinia

Vue Pinia

What is Pinia?

Why Use Pinia?

Install Pinia

Setup Pinia

Create Store

Using Store

Core Concepts

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Vue Pinia

Vue Pinia

What is Pinia?

Why Use Pinia?

Install Pinia

Setup Pinia

Create Store

Using Store

Core Concepts

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?