时间计算器进化史3--------增加本地存储和清除功能

地址：http://computed.liankm.com/#/

存储内容应为

[{id:xxxx,content:yyy}]

可是我之前使用的维护时间组件的列表是[xxx,yyy,zzz]每个值是对应id。这里要修改为对象。

修改点：

       1，mounted时，若有localstorage则按照取出来的内容初始化，否则是原来的逻辑，初始化一个内容，时间为0。

       2，要让时间组件能够初始化传入的值，之前都是默认为0。所以要加个props。

       3，因为保存的时间都是转化成秒的数值，所以时间组件要自己处理把秒转化成对应的时分秒。方法与父组件中的显示时分秒类似。所以提了一个公共方法，使用import export来导入导出。

       4，时间组件修改时，要传出额外的内容，原来只传更改了多少，这样外面做总计算的时候很方便，可是现在要在多传一个修改后的秒数。

 

涉及到的技术点

1.props的使用，两种写法

props:{
    defaultTime:{
      type:[String,Number],
      default:0,
      require:true
    }
  },

props:['default']

2，localStorage的使用，从这里知道了JSON.stringify可以转数组。

写入
localStorage.setItem("timeboxList", JSON.stringify(this.timeboxList));
读取
localStorage.getItem("timeboxList");

3，import 和 export

import { timeToParse } from "../utils/util";

export function timeToParse(val) {
    let second, minite, hours;
    second = val % 60;
    hours = parseInt(val / 3600);
    minite = parseInt((val - hours * 3600) / 60);
    return {
        hours,
        minite,
        second
    }
}

export const name1 = 'xiaoming'

const age1 = 1
const age2 = 2
export default { age1,age2}

4，$emit传多个参数

可以使用对象，这样还是传一个参数，
可以正常往后面写参数，这样父组件就用arguments来接收

@change="checkBox($event,index)"
@change="checkBox(arguments,index)