封装localStorage
store.js const STORAGE_KEY = 'tddos-vuejs' export default { fetch: function () { return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save:function (items) { window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items)) } }
crud的页面
关键点: 使用watch监听数组
使用deep 深检查对象属性,
使用 :class控制样式
使用封装的Store.fetch 初始化显示 缓存的数据。
HelloWorld.Vue <template> <div class="hello"> <h2>Todos Again - vue.js</h2> <input type="text" placeholder="do what?" id="add-input" v-model="newItem" @keyup.enter="addNew"/> <ul> <li v-for="item in items" :class="{selected: item.isSelected}" @click="item.isSelected = !item.isSelected"> <h3>{{item.content}}</h3> </li> </ul> </div> </template> <script> import Store from '../store' export default { name: 'HelloWorld', data () { return { newItem: '', items: Store.fetch() } }, components: { }, watch:{ items: { handler:function (val, oldVal) { console.log(val, oldVal) Store.save(val) }, deep: true } }, methods: { addNew() { this.items.push({content:this.newItem, isSelected:false}) this.newItem = '' console.log(this.items) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .hello{ display: flex; flex-direction: column; } h1, h2 { font-weight: normal; } .selected{ text-decoration: underline; } ul { list-style-type: none; padding: 0; } li { /*display: inline-block;*/ margin: 0 10px; } a { color: #42b983; } </style>
完