Skip to content

Example TodoMVC Vue.js app with Vuex store and server backend via REST

Notifications You must be signed in to change notification settings

bahmutov/vue-vuex-todomvc

Repository files navigation

vue-vuex-todomvc renovate-app badge ci status cypress version

Simple TodoMVC with Vue.js and Vuex data store.

Based on this Vuex tutorial and the basic official TodoMVC vue.js example

Read my step by step tutorial explaining the code and this thorough blogpost how this application is tested using Cypress.

Software organization

Vue Vuex REST data flow

Use

Clone this repository then

npm install
npm start

Open localhost:3000 in the browser.

Tests

All tests are implemented using Cypress.io

cy-spok example

See the spec new-item-spec.js that shows how to use cy-spok plugin to confirm the request object. Watch the introduction to cy-spok plugin video here.

Development

The app global variable exposes the Vue instance.

To see "plain" values from the store (without all Observer additions)

app.$store.getters.todos
    .map(JSON.stringify) // strips utility fields
    .map(JSON.parse)     // back to plain objects
    .forEach(t => console.log(t)) // prints each object

Or print them as a table

console.table(app.$store.getters.todos.map(JSON.stringify).map(JSON.parse))

Small print

Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2021

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

About

Example TodoMVC Vue.js app with Vuex store and server backend via REST

Topics

Resources

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •