Vue JS Vue JS State Management 3 — Questions and Answers
Question 1: How do you subscribe to state changes in Pinia to run a side effect after every mutation?
- store.$watch()
- store.$subscribe() (Correct answer)
- store.onMutate()
- store.watch()
Correct answer: store.$subscribe()
$subscribe() registers a callback that fires after every state change in the store, providing the mutation and the new state.
Question 2: What is the Composition API style of defining a Pinia store?
- Using defineStore() with an options object
- Using defineStore() with a setup function that returns reactive state and methods (Correct answer)
- Using createStore() from vuex
- Using ref() and reactive() outside any function
Correct answer: Using defineStore() with a setup function that returns reactive state and methods
The setup store syntax passes a setup function to defineStore() where you use ref(), computed(), and plain functions, then return everything to expose.
Question 3: How can Pinia store actions be tested in isolation without mounting a Vue component?
- Actions cannot be tested without a component
- Create a Pinia instance with createPinia(), install it with setActivePinia(), then call the store composable directly (Correct answer)
- Use jest.mock() to replace the entire store
- Only Vuex stores can be tested in isolation
Correct answer: Create a Pinia instance with createPinia(), install it with setActivePinia(), then call the store composable directly
setActivePinia(createPinia()) sets up a fresh Pinia context so you can instantiate and test stores directly in Jest/Vitest without a Vue app.
Question 4: What Vuex plugin feature allows you to intercept every mutation to implement logging or persistence?
- store.use()
- plugins array in createStore() with a subscribe-based function (Correct answer)
- store.middleware()
- Vuex.applyPlugin()
Correct answer: plugins array in createStore() with a subscribe-based function
Vuex plugins are functions added to the plugins array in createStore() that receive the store and call store.subscribe() to react to every mutation.
Question 5: In Pinia, how do you reset a store's state to its initial values?
- store.reset()
- store.$reset() (Correct answer)
- store.setState(initialState)
- store.$patch({})
Correct answer: store.$reset()
$reset() is a built-in Pinia method available on Options-API stores that reverts all state properties back to their initial values.
Question 6: What is the advantage of using Pinia over Vuex 4 in a Vue 3 application?
- Pinia is faster at rendering templates
- Pinia has no mutations, better TypeScript support, and a simpler API (Correct answer)
- Pinia provides built-in HTTP caching
- Pinia stores automatically persist to a database
Correct answer: Pinia has no mutations, better TypeScript support, and a simpler API
Pinia removes the mutation layer (actions can directly modify state), has first-class TypeScript inference, and offers a lighter and more ergonomic API.
Vue JS Vue JS State Management 3
How do you subscribe to state changes in Pinia to run a side effect after every mutation?