vue笔记值store

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <!-- 按回车键添加内容 -->
    <input type="" name="" v-model="newItem" v-on:keyup.enter ="addNew" >
    <ul>
      <li v-for="item in items" :class="{textcolor:item.isTextColor}" v-on:click="toggleText(item)">
        {{item.text}}
      </li>
    </ul>
    <Test></Test>
  </div>
  
</template>

<script>
import Store from './store'
export default {
  name: 'App',
  data: function () {
    return {
      title: 'this is a todo list',
      items: Store.fetch(),
      newItem:''
    }
    
  },
  watch: {
    items: {
      handler: function (items) {
        Store.save(items);
      },
      deep: true
    }
  },
  methods: {
      toggleText: function (item) {
        item.isTextColor = !item.isTextColor
      },
      addNew: function () {
        this.items.push ({
          text: this.newItem,
          isTextColor: false
        });
        this.newItem = '';
        
      }
  },
  components: {
    Test
  }
}
</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;
}
.textcolor{
  color:red;
}
</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))
	}
}