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>

 

转载于:https://www.cnblogs.com/CyLee/p/8425122.html