Skip to content

Commit f1bfcd4

Browse files
sudheerjsudheerj
committed
Add getters questions and answers
1 parent 1af8230 commit f1bfcd4

File tree

1 file changed

+201
-1
lines changed

1 file changed

+201
-1
lines changed

‎README.md‎

Lines changed: 201 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,19 @@ List of 300 VueJS Interview Questions
160160
|151| [What is mapState helper?](#what-is-mapstate-helper)|
161161
|152| [How do you combine local computed properties with mapState helper?](#how-do-you-combine-local-computed-properties-with-mapstate-helper)|
162162
|153| [Do you need to replace entire local state with vuex?](#do-you-need-to-replace-entire-local-state-with-vuex)|
163+
|154| [What are vuex getters?](#what-are-vuex-getters?)|
164+
|155| [What is a property style access?](#what-is-a-property-style-access)|
165+
|156| [What is a method style access?](#what-is-a-method-style-access)|
166+
|157| [What is mapGetter helper?](#what-is-mapgetter-helper)|
167+
|158| [What are mutations?](#what-are-mutations)|
168+
|159| [How do you commit with payload?](#how-do-you-commit-with-payload)|
169+
|160| [What is object style commit?](#what-is-object-style-commit)|
170+
|161| [What are the caveats with vuex mutations?](#what-are-the-caveats-with-vuex-mutations)|
171+
|162| [Why mutations should be synchronous?](#why-mutations-should-be-synchronous)|
172+
|163| [How do you perform mutations in components?](#how-do-you-perform-mutations-in-components)|
173+
|164| [Is it mandatory to use constants for mutation types?](#is-it-mandatory-to-use-constants-for-mutation-types)|
174+
|165| [How do you perform asynchronous operations?](#how-do-you-perform-asynchronous-operations)|
175+
|166| [What are differences between mutations and actions?](#what-are-differences-between-mutations-and-actions)|
163176

164177
1. ### What is VueJS?
165178
**Vue.js** is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of VueJS is focused on the `view layer` only, and is easy to pick up and integrate with other libraries or existing projects.
@@ -2819,4 +2832,191 @@ List of 300 VueJS Interview Questions
28192832
}
28202833
```
28212834
153. ### Do you need to replace entire local state with vuex?
2822-
No, if a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. i.e, Eventhough vuex used in the application, it doesn't mean that you need to keep all the local state in vuex store. Other the code becomes more verbose and indirect although it makes your state mutations more explicit and debuggable.
2835+
No, if a piece of state strictly belongs to a single component, it could be just fine leaving it as local state. i.e, Eventhough vuex used in the application, it doesn't mean that you need to keep all the local state in vuex store. Other the code becomes more verbose and indirect although it makes your state mutations more explicit and debuggable.
2836+
154. ### What are vuex getters??
2837+
Vuex getters acts as computed properties for stores to compute derived state based on store state. Similar to computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
2838+
Let's take a todo example which as completedTodos getter to find all completed todos,
2839+
```javascript
2840+
const store = new Vuex.Store({
2841+
state: {
2842+
todos: [
2843+
{ id: 1, text: 'Vue course', completed: true },
2844+
{ id: 2, text: 'Vuex course', completed: false },
2845+
{ id: 2, text: 'Vue Router course', completed: true }
2846+
]
2847+
},
2848+
getters: {
2849+
completedTodos: state => {
2850+
return state.todos.filter(todo => todo.completed)
2851+
}
2852+
}
2853+
})
2854+
```
2855+
**Note:**Getters receive state as first argument.
2856+
155. ### What is a property style access?
2857+
You can access values of store's getter object(store.getters) as properties. This is known as property style access.
2858+
For example, you can access todo's status as a property,
2859+
```javascript
2860+
store.getters.todosStatus
2861+
```
2862+
The getters can be passed as 2nd argument for other getters. For example, you can derive completed todo's count based on their status as below,
2863+
```javascript
2864+
getters: {
2865+
completedTodosCount: (state, getters) => {
2866+
return getters.todosStatus === 'completed'
2867+
}
2868+
}
2869+
```
2870+
**Note:** The getters accessed as properties are cached as part of Vue's reactivity system.
2871+
156. ### What is a method style access?
2872+
You can access store's state in a method style by passing arguments. For example, you can pass user id to find user profile information as below,
2873+
```javascript
2874+
getters: {
2875+
getUserProfileById: (state) => (id) => {
2876+
return state.users.find(user => user.id === id)
2877+
}
2878+
}
2879+
```
2880+
After that you can access it as a method call,
2881+
```javascript
2882+
store.getters.getUserProfileById(111); {id: '111', name: 'John', age: 33}
2883+
```
2884+
157. ### What is mapGetter helper??
2885+
The mapGetters is a helper that simply maps store getters to local computed properties. For example, the usage of getters for todo app would be as below,
2886+
```javascript
2887+
import { mapGetters } from 'vuex'
2888+
2889+
export default {
2890+
computed: {
2891+
// mix the getters into computed with object spread operator
2892+
...mapGetters([
2893+
'completedTodos',
2894+
'todosCount',
2895+
// ...
2896+
])
2897+
}
2898+
}
2899+
```
2900+
158. ### What are mutations?
2901+
Vuex mutations are similar to any events with a string `type` and a `handler`. The handler function is where we perform actual state modifications, and it will receive the state as the first argument.
2902+
For example, the counter example with increment mutation would be as below,
2903+
```javascript
2904+
const store = new Vuex.Store({
2905+
state: {
2906+
count: 0
2907+
},
2908+
mutations: {
2909+
increment (state) {
2910+
// mutate state
2911+
state.count++
2912+
}
2913+
}
2914+
})
2915+
```
2916+
You can't directly invoke mutation instead you need to call `store.commit` with its type. The above mutation would be triggered as folows
2917+
```javascript
2918+
store.commit('increment')
2919+
```
2920+
159. ### How do you commit with payload?
2921+
You can also pass **payload** for the mutation as an additional argument to `store.commit`. For example, the counter mutation with payload object would be as below,
2922+
```javascript
2923+
mutations: {
2924+
increment (state, payload) {
2925+
state.count += payload.increment
2926+
}
2927+
}
2928+
```
2929+
And then you can trigger increment commit
2930+
```javascript
2931+
store.commit('increment', {
2932+
increment: 20
2933+
})
2934+
```
2935+
**Note:** You can also pass primitives as payload.
2936+
160. ### What is object style commit?
2937+
You can also commit a mutation is by directly using an object that has a **type** property.
2938+
```javascript
2939+
store.commit({
2940+
type: 'increment',
2941+
value: 20
2942+
})
2943+
```
2944+
Now the entire object will be passed as the payload to mutation handlers(i.e, without any changes to handler signature).
2945+
```javascript
2946+
mutations: {
2947+
increment (state, payload) {
2948+
state.count += payload.value
2949+
}
2950+
}
2951+
```
2952+
161. ### What are the caveats with vuex mutations?
2953+
Since a Vuex store's state is made reactive by Vue, the same reactivity caveats of vue will apply to vuex mutations. These are the rules should be followed for vuex mutations,
2954+
1. It is recommended to initialize store's initial state with all desired fields upfront
2955+
2. Add new properties to state Object either by set method or object spread syntax
2956+
```javascript
2957+
Vue.set(stateObject, 'newProperty', 'John')
2958+
```
2959+
(OR)
2960+
```javascript
2961+
state.stateObject = { ...state.stateObject, newProperty: 'John' }
2962+
```
2963+
162. ### Why mutations should be synchronous?
2964+
You need to remember that mutation handler functions must be synchronous. This is why because any state mutation performed in the callback is essentially un-trackable. It is going to be problematic when the devtool will need to capture a "before" and "after" snapshots of the state during the mutations.
2965+
```javascript
2966+
mutations: {
2967+
someMutation (state) {
2968+
api.callAsyncMethod(() => {
2969+
state.count++
2970+
})
2971+
}
2972+
}
2973+
```
2974+
163. ### How do you perform mutations in components?
2975+
You can commit mutations in components with either **this.$store.commit('mutation name')** or mapMutations helper to map component methods to **store.commit** calls.
2976+
For example, the usage of mapMutations helper on counter example would be as below,
2977+
```javascript
2978+
import { mapMutations } from 'vuex'
2979+
2980+
export default {
2981+
methods: {
2982+
...mapMutations([
2983+
'increment', // map `this.increment()` to `this.$store.commit('increment')`
2984+
2985+
// `mapMutations` also supports payloads:
2986+
'incrementBy' // map `this.incrementBy(amount)` to `this.$store.commit('incrementBy', amount)`
2987+
]),
2988+
...mapMutations({
2989+
add: 'increment' // map `this.add()` to `this.$store.commit('increment')`
2990+
})
2991+
}
2992+
}
2993+
```
2994+
164. ### Is it mandatory to use constants for mutation types?
2995+
No, it is not mandatory. But you might observed that State management implementations such Flux and Redux use constants for mutation types. This convention is just a preference and useful to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application.
2996+
For example, the mutations can be declared as below,
2997+
```javascript
2998+
// mutation-types.js
2999+
export const SOME_MUTATION = 'SOME_MUTATION'
3000+
```
3001+
And you can configure them in store as follows,
3002+
```javascript
3003+
// store.js
3004+
import Vuex from 'vuex'
3005+
import { SOME_MUTATION } from './mutation-types'
3006+
3007+
const store = new Vuex.Store({
3008+
state: { ... },
3009+
mutations: {
3010+
// ES2015 computed property name feature to use a constant as the function name
3011+
[SOME_MUTATION] (state) {
3012+
// mutate state
3013+
}
3014+
}
3015+
})
3016+
```
3017+
165. ### How do you perform asynchronous operations?
3018+
In Vuex, mutations are synchronous transactions. But if you want to handle asynchronous operations then you should use **actions**.
3019+
166. ### What are differences between mutations and actions?
3020+
Actions are similar to mutations, but there are two main differences,
3021+
1. Mutations perform mutations on the state, actions commit mutations.
3022+
2. Actions can contain arbitrary asynchronous operations unlike mutations.

0 commit comments

Comments
 (0)