vue.js做todolist并使用localstorage存储

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input v-model="newItem" @keyup.enter="addNew">
    <ul>
        <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)">{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
import Store from './store'
export default {
    data:function(){
        return{
            title: 'this is a todo list ',
            items:Store.fetch(),
            newItem:''
        }
    },
    watch:{
    items:{
        handler:function(items){
            Store.save(items);
        },
        deep:true
    }
    },
     methods:{
         toggleFinish:function(item){
             item.isFinished = !item.isFinished
         },
         addNew:function(){
            this.items.push({
                label:this.newItem,
                isFinished:false
            })
            this.newItem = '';
         }
     }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.finished{ text-decoration: line-through; }
</style>

store.js

const STORAGE_KEY = 'todos-vuejs';
export default {
    fetch(){
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY || '[]'))
    },
    save(items){
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}