import Storage from '../store/store'//新添加，把刚写的localStorage导入
export default {
name: "NewContact",
data(){
return {
info: {
name: '',
age: null,
sex: ''
},
options: [
'女','男','保密'
],
tabledata: Storage.fetch()//把之前的删除，写入这个获取数据的方法
}
},
methods: {
create(){
this.tabledata.push(this.info)
this.info = {name: '', age: null, sex: ''}
},
del(index){
this.tabledata.splice(index,1)
}
},
watch:{//新添加，watch是vue的监听，一旦监听对象有变化就会执行相应操作
tabledata{//新添加，被监听的对象
handler(items){Storage.save(items)},//新添加，监听对象变化后所做的操作，一个函数，保存数据
deep: true//深度监听，避免数据的嵌套层数太多，要使用深度监听，防止数据层级过多监听不到
}
tabledata:由于fetch()得到的是数组，所以直接tabledata: 后写入就行类似于
tabledata:[{...},{...}]当我们添加删除数据时，可以打开chrmoe浏览器的F12>Application>Local Storage进行查看
总的来说就是我们点击页面上的创建按钮，watch监听到tabledata有变化，就执行savedata(items){Storage.save(items)}进行数据保存，点击删除时，tabledata也有变化，同样会执行保存
可能之前写的内容会有不小心写错字母的情况，最后把NewContact.vue稍稍修改样式后，把完整的内容拷贝到下方：
NewContact.vue
<template>
<el-row>
<el-col :xs="24" :sm="18" :md="14" :lg="10" id="main">
<label>姓名：</label>
<el-input v-model="info.name" placeholder="请输入姓名"></el-input>
<label>年龄：</label>
<el-input v-model="info.age" placeholder="请输入年龄"></el-input>
<label>性别：</label>
<el-select v-model="info.sex" placeholder="请选择">
<el-option v-for="item in options" :key="item" :value="item"></el-option><!-- 这里的key官方推荐在v-for时使用，不然会警告，但不影响使用 -->
</el-select>
<el-button class="btn-auto" @click="create" type="success">创建</el-button>
<template>
<el-table :data="tabledata" align="left">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column label="操作">
