Vue JS Vue JS State Management

Question 1

What is the primary purpose of Pinia in a Vue 3 application?

Accepted Answer

Centralized state management store

Answer

Template rendering engine

Answer

HTTP client library

Answer

CSS-in-JS solution

Question 2

In Pinia, what is the difference between state, getters, and actions?

Accepted Answer

state holds data, getters are computed values, actions contain logic/mutations

Answer

They are all identical and interchangeable

Answer

getters replace components, actions replace watchers

Answer

state is async, getters are sync, actions are static

Question 3

How do you define a Pinia store using the Options API style?

Accepted Answer

const useMyStore = defineStore('myStore', { state: () => ({}), getters: {}, actions: {} })

Answer

const store = new Pinia({ id: 'myStore', state: () => ({}) })

Answer

export default createStore({ state: {} })

Answer

const store = usePinia().createStore({ name: 'myStore' })

Question 4

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

Accepted Answer

const store = useMyStore() inside setup()

Answer

import store from '@/stores/myStore'

Answer

Inject it via the Vue plugin system manually

Answer

Access it via this.$pinia.myStore

Question 5

Which Pinia method allows you to patch multiple state properties at once?

Accepted Answer

store.$patch()

Answer

store.commit()

Answer

store.setState()

Answer

store.$merge()

Question 6

In Vuex 4, what is a mutation and why must state changes go through it?

Accepted Answer

A synchronous function that is the only valid way to change Vuex state, enabling devtools tracking

Answer

An async API call handler

Answer

A computed property for the store

Answer

A plugin hook for middleware