Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Large Application Patterns with Vuex Chapter 18

How to do it...

First, I'll define some features that our store must implement; then you will write tests that
prove that the features are present and working.

Software requirements

Our store consists of items in a to-do list, like the following:

state: {

todo: [

{ id: 43, text: 'Buy iPhone', done: false },

],

archived: [

{ id: 2, text: 'Buy gramophone', done: true },

]

}

We have two requirements:

We must have an MARK_ITEM_AS_DONE mutation that changes the done field

from false to true

We must have a downloadNew action that downloads the latest items from our

server and adds them to the list

Testing mutations

To be able to test your mutations, you have to make them available for your test files. To do

this, you have to extract the mutation object from your store. Consider something like this:

import Vuex from 'vuex'

import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({

...

mutations: {

...

MARK_ITEM_AS_DONE (state, itemId) {

state.todo.filter(item => {

return item.id === itemId