Creating a Pinia store in Vue - Quick Revision & Summary

Recall & Review

beginner

What is Pinia in Vue.js?

Pinia is a state management library for Vue.js that helps you store and manage shared data across components in a simple and organized way.

beginner

How do you create a basic Pinia store?

You create a Pinia store by defining a function with <code>defineStore</code> that returns state, getters, and actions. For example:<br><pre>import { defineStore } from 'pinia';
export const useMainStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } }
});</pre>

beginner

What is the purpose of the state property in a Pinia store?

The state property holds the reactive data that the store manages. It is a function returning an object with all the data properties you want to share.

beginner

How do you use a Pinia store inside a Vue component?

Inside a Vue component, you import the store and call it as a function to get access to its state and actions. For example:<br><pre>import { useMainStore } from '@/stores/main';
const mainStore = useMainStore();
mainStore.increment();</pre>

beginner

Why should you use Pinia instead of local component state for shared data?

Pinia centralizes shared data so multiple components can access and update it easily. This avoids passing props deeply and keeps your app organized and easier to maintain.

Which function is used to create a Pinia store?

A useStore

B createStore

C defineStore

D makeStore

The correct function to create a Pinia store is defineStore.

What does the state property in a Pinia store return?

A A plain object with methods

B A function returning an object with reactive data

C A string representing the store name

D An array of actions

The state property must be a function that returns an object containing reactive data.

How do you access a Pinia store inside a Vue component?

A Call the store function imported from the store file

B Use <code>this.$store</code> like Vuex

C Use <code>new Store()</code>

D Import and use <code>createStore()</code>

You import the store and call it as a function to get the store instance.

Which of these is NOT a part of a Pinia store?

A state

B actions

C getters

D components

Pinia stores have state, actions, and getters, but not components.

Why is Pinia preferred over local component state for shared data?

A It centralizes data for easy sharing across components

B It makes components heavier

C It requires more code

D It disables reactivity

Pinia centralizes shared data, making it easier to manage and share across components.

Explain how to create and use a Pinia store in a Vue 3 application.

Think about the steps from defining the store to using it inside a component.

Describe the benefits of using Pinia for state management compared to local component state.

Consider why managing shared data in one place helps your app.