vue 结合localStorage 来双向绑定数据

结合localStorage 来双向绑定数据（超级神奇）

 

localStorage.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))
  }
}

App.vue

打开Chrome浏览器控制台找到"Application - Storage - Local Storage",观察变化

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

<script>
import Storage from './localStorage.js'
console.log(Storage)
export default {
  data () {
    return {
      title: 'Hello World!',
      items: Storage.fetch(),
      newItem: ''
    }
  },
  methods: {
    toggleFinish (item) {
      item.isFinished = !item.isFinished
    },
    addItem () {
      console.log(this.newItem)
      this.items.push({
        label: this.newItem,
        isFinished: false
      })
      this.newItem = ''
    }
  },
  watch: {
    items: {
      handler (items) {
        Storage.save(items)
      },
      deep: true
    }
  }
}
</script>

<style>
.finished{text-decoration: underline;}
html {height: 100%; }
body {display: flex; align-items: center; justify-content: center; height: 100%; }
#app {color: #2c3e50; margin-top: -100px; max-width: 600px; font-family: Source Sans Pro, Helvetica, sans-serif; text-align: center; }
#app a {color: #42b983; text-decoration: none; }
.logo {width: 100px; height: 100px }
</style>