Vue JS Vue JS State Management 2 — Questions and Answers
Question 1: What Vuex helper maps store state properties directly to component computed properties?
- mapGetters()
- mapState() (Correct answer)
- mapMutations()
- mapActions()
Correct answer: mapState()
mapState() is a Vuex helper that creates computed properties in a component that return the corresponding state values from the store.
Question 2: How do Vuex modules help manage large applications?
- They split the app into multiple Vuex store instances
- They allow state, mutations, actions, and getters to be organized into separate namespaced modules (Correct answer)
- They enable asynchronous state initialization
- They create isolated component trees
Correct answer: They allow state, mutations, actions, and getters to be organized into separate namespaced modules
Vuex modules divide the store into encapsulated sections with their own state, mutations, getters, and actions to prevent a single massive store.
Question 3: What is the purpose of Pinia's storeToRefs() function?
- Converts Pinia to a Vuex-compatible format
- Destructures store state and getters into refs while keeping reactivity (Correct answer)
- Creates a read-only snapshot of store state
- Registers a store with the Pinia instance
Correct answer: Destructures store state and getters into refs while keeping reactivity
storeToRefs() lets you destructure reactive refs from a store without losing reactivity, similar to toRefs() for reactive objects.
Question 4: In Vuex, what is the difference between getters and state?
- State is mutable; getters are cached computed values derived from state (Correct answer)
- Getters hold raw data; state holds computed data
- They are identical but getters are async
- State is module-scoped; getters are global
Correct answer: State is mutable; getters are cached computed values derived from state
State holds the raw reactive data, while getters are like computed properties that derive and cache values from state, recalculating only when dependencies change.
Question 5: How do you dispatch a Vuex action from inside a Vue component?
- this.$store.commit('actionName')
- this.$store.dispatch('actionName', payload) (Correct answer)
- store.trigger('actionName')
- this.$store.run('actionName')
Correct answer: this.$store.dispatch('actionName', payload)
Actions are dispatched with this.$store.dispatch(), optionally passing a payload as the second argument, and they return a Promise.
Question 6: What does the namespaced: true option do in a Vuex module?
- Makes module state globally accessible without prefix
- Scopes all module getters, mutations, and actions under the module's path as a prefix (Correct answer)
- Prevents the module from being accessed by other modules
- Automatically creates typed TypeScript interfaces
Correct answer: Scopes all module getters, mutations, and actions under the module's path as a prefix
With namespaced: true, all identifiers in the module must be prefixed with the module name, e.g., 'user/setName' instead of 'setName'.
Vue JS Vue JS State Management 2
What Vuex helper maps store state properties directly to component computed properties?