Vue.js Interview Questions

Since mutations are just functions that completely rely on their arguments it will be easier to test. You need to keep mutations inside your store.js file and should also export the mutations as a named export apart from default export.

Let's take an example of increment mutations,

// mutations.js
export const mutations = {
increment: state => state.counter++
}

And test them using mocha and chai as below,

// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'

// destructure assign `mutations`
const { increment } = mutations

describe('mutations', () => {
it('INCREMENT', () => {
// mock state
const state = { counter: 10 }
// apply mutation
increment(state)
// assert result
expect(state.counter).to.equal(11)
})
})

It is easier to test getters similar to mutations. It is recommended to test these getters if they have complicated computation.

Let's take a simple todo filter as a getter

// getters.js
export const getters = {
filterTodos (state, status) {
return state.todos.filter(todo => {
return todo.status === status
})
}
}

And the test case for above getter as follows,

// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'

describe('getters', () => {
it('filteredTodos', () => {
// mock state
const state = {
todos: [
{ id: 1, title: 'design', status: 'Completed' },
{ id: 2, title: 'testing', status: 'InProgress' },
{ id: 3, title: 'development', status: 'Completed' }
]
}
// mock getter
const filterStatus = 'Completed'

// get the result from the getter
const result = getters.filterTodos(state, filterStatus)

// assert the result
expect(result).to.deep.equal([
{ id: 1, title: 'design', status: 'Completed' },
{ id: 2, title: 'development', status: 'Completed' }
])
})
})

By proper mocking, you can bundle tests with webpack and run them on node without having depenceny on Browser API. It involves 2 steps,

1. Create webpack config: Create webpack config with proper .babelrc

// webpack.config.js
module.exports = {
entry: './test.js',
output: {
path: __dirname,
filename: 'test-bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}

2. Run testcases: First you need to bundle and then run them using mocha as below,

webpack
mocha test-bundle.js

Below are the steps to run tests in real browser,

1. Install mocha-loader.
2. Configure webpack config entry point to 'mocha-loader!babel-loader!./test.js'.
3. Start webpack-dev-server using the config.
4. Go to localhost:8080/webpack-dev-server/test-bundle to see the test result

In strict mode, whenever Vuex state is mutated outside of mutation handlers, an error will be thrown. It make sure that all state mutations can be explicitly tracked by debugging tools. You can just enable this by passing strict: true while creating the vuex store.

const store = new Vuex.Store({
// ...
strict: true
})

No, it is not recommended to use strict mode in production environment. Strict mode runs a synchronous deep watcher on the state tree for detecting inappropriate mutations and it can be quite expensive when you perform large amount of mutations. i.e, It can impact performance if you enable in production mode. Hence, it should be handled through build tools,

const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})

The vuex plugin is an option hat exposes hooks for each mutation. It is a normal function that receives the store as the only argument. You can create your own plugin or use built-in plugins. The plugin skeleton would be as below,

const myPlugin = store => {
// called when the store is initialized
store.subscribe((mutation, state) => {
// called after every mutation.
// The mutation comes in the format of `{ type, payload }`.
})
}

After that plugin can be configured for plugins options as below,

const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})

Similar to components you can't mutate state directly but they can trigger changes by by committing mutations. This way a plugin can be used to sync a data source to the store.

For example, createWebSocketPlugin plugin is used to sync a websocket data source to the store.

export default function createWebSocketPlugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload)
}
})
}
}

And then configure plugin in vuex store as below

const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})

A Vuex "store" is basically a container that holds your application state. The store creation is pretty straightforward.

Below are the list of instructions to use vuex in an increment application,

1. Configure vuex in vuejs ecosystem

import Vuex from "vuex";
Vue.use(Vuex)

2. Provide an initial state object and some mutations

// Make sure to call Vue.use(Vuex) first if using a module system

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})

3. Trigger state change with commit and access state variables,

store.commit('increment')

console.log(store.state.count) // -> 1

Below are the two major differences between vuex store and plain global object,

1. Vuex stores are reactive: If the store's state changes then vue components will reactively and efficiently get updated
2. Cannot directly mutate the store's state: The store's state is changed by explicitly committing mutations to ensure that every state change leaves a track-able record for tooling purpose

We want to explicitly track application state in order to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. So we need to commit a mutation instead of changing store's state directly.

Vuex's single state tree is single object contains all your application level state and serves as the "single source of truth". It does not conflict with modularity when you split state and mutations into sub modules.

You can install vuex using npm or yarn as below,

npm install vuex --save
(or)
yarn add vuex

In a module system, you must explicitly install Vuex via Vue.use()

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

(OR)

You can also install it using CDN links such as unpkg.cpm which provides NPM-based CDN links. Just include vuex after Vue and it will install itself automatically.

<script src="https://unpkg.com/vue.js"></script>
<script src="https://unpkg.com/vuex.js"></script>

Note: You can use a specific version/tag via URLs like https://unpkg.com/vuex@2.0.0. If you don't mention any version then it will point to latest version.

Yes, vuex requires Promise. If your supporting browsers do not implement Promise (e.g. IE), you can use a polyfill library, such as es6-promise using npm or yarn.

npm install es6-promise --save # NPM
yarn add es6-promise # Yarn

After that import into anywhere in your application,

import 'es6-promise/auto'

Since Vuex stores are reactive, you can retrieve" state from store by simply returning store's state from within a computed property. i.e, Whenever store state changes, it will cause the computed property to re-evaluate, and trigger associated DOM updates.

Let's take a hello word component which display store's state in the template,

// let's create a hello world component
const Greeting = {
template: `<div>{{ greet }}</div>`,
computed: {
greet () {
return store.state.msg
}
}
}