文章目录
封装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>
完