Vue JS State Management with Pinia/Vuex

Question 1

What is the recommended state management library for Vue 3?

Accepted Answer

Pinia

Answer

Pinia is the official state management library recommended by the Vue team for Vue 3. It offers a simpler API, better TypeScript support, and Devtools integration.

Question 2

How do you define a store in Pinia using the Setup Store syntax?

Accepted Answer

defineStore('id', () => { const count = ref(0); return { count } })

Answer

`defineStore` with a setup function (returning reactive state, computed, and actions) is the Composition API-style store definition in Pinia.

Question 3

In Vuex 4, what is the only way to synchronously change state?

Accepted Answer

Mutations

Answer

In Vuex, mutations are the only mechanism for synchronous state changes. Actions can be asynchronous and must commit mutations to change state.

Question 4

How do you access a Pinia store's state and actions inside a Vue 3 component?

Accepted Answer

const store = useMyStore(); store.count; store.increment()

Answer

Pinia stores are used by calling the composable returned by `defineStore`. The result directly exposes state, getters, and actions as flat properties.

Question 5

What does `storeToRefs` do in Pinia?

Accepted Answer

Destructures store state and getters while preserving their reactivity

Answer

`storeToRefs` extracts reactive refs from a Pinia store so you can destructure state/getters without losing reactivity. Actions should not be included.

Vue JS Practice Test

Vue JS Practice Test

Vue JS State Management with Pinia/Vuex