<file_sep># 2do

A simple to-do list PWA made with Vue JS as an example

Using:

* Vue PWA template

* Vuex

* Vue loader

* Vue routing

* localStorage

Next 2 do:

* Animations

* Font Awesome

* Settings page

* Better layout

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
<file_sep>const STORAGE_KEY = '<KEY>'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const taskSaver = store => {
    store.subscribe((mutation, {tasks}) => {
        // console.log('saving to storage')
        localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks))
    })
}

export default new Vuex.Store({
    state: {
        // Current state of the application lies here.
        tasks: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),

    },
    getters: {
        getTasks: state => {
            return state.tasks
        },
    },
    mutations: {
        addTask: (state, text) => {
            var newId = Math.floor(Math.random() * 100) + 1
            state.tasks.push({ id: newId, text: text })
        },
        deleteTask: (state, id) => {
            console.log('deleting: ',id)
            state.tasks = state.tasks.filter((task) => { 
                return task.id != id;
            })
        }
    },
    actions: {},

    plugins: [taskSaver]
})