Skip to content
Example TodoMVC Vue.js app with Vuex store and server backend via REST
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cypress disable flaky travis tests Mar 14, 2018
.gitignore chore: remove file upload Feb 17, 2018
.travis.yml retry on travis Feb 17, 2018
README.md remove greenkeeper badge Mar 14, 2018
app.js chore: remove file upload Feb 17, 2018
cypress.json record tests on CI Nov 20, 2017
data.json more store tests Nov 21, 2017
index.html chore: remove file upload Feb 17, 2018
package.json fix(deps): update dependency json-server to v0.14.2 Dec 26, 2018
renovate.json add renovate Mar 14, 2018
vue-vuex-rest.png add diagram Nov 22, 2017

README.md

vue-vuex-todomvc Build Status

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

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))
You can’t perform that action at this time.