一、项目介绍
蔚蓝记账本项目是一个基于Vue、Vuex、VueRouter以及Typescript的简约版单页面应用，由本人设计和实现期间遇到的多数记录在博客中，预览链接
二、知识点
- 类组件+装饰器语法
- computed ts写法
- watch装饰器写法
- prop、sync、v-model、slot插槽
- svg symbols、eslint、localStorage(存储5-10M的内容)
- 表驱动编程思想
- 重构和模块化
- Vue Router(hash/history),当前使用的是hash模式
- Vuex状态管理
三、问题与解决方案
1. 手机 input type=date 显示颜色无效
background-color:transparent;
color:#fff;
FILTER: alpha(opacity=0); /*androd去掉边框与背景*/
appearance:none; /*下拉框去掉右侧图标*/
2. 错误复现：任意选择一个标签后，点击收支按钮切换标签后再选择标签提交，在统计页则出现标签类型错误,本该出现在支出类型的饼图却出现在了收入类型的饼图
兼职属于收入类型的标签，在统计时却被放到了支出统计页面。
原因：选择一个标签后，record记录下当前的选择，点击收支切换后又选择标签也同样记下，导致record记录有误，解决方案，选择标签的方法先遍历一下当前的record是否和当前的收入支出的type类型一致，不一致则设为空
以下图片为tag标签的储存格式
selected(tag: any) {
const index = this.selectTags.indexOf(tag);
if (index >= 0) {
this.selectTags.splice(index, 1);
} else {
if (this.selectTags.length < 4) {
this.selectTags.forEach((item: any) => {
if (item.type !== this.Type) {
this.selectTags = [];
}
});
this.selectTags.push(tag);
} else {
alert("最多选择4个标签！");
}
}
this.$emit("update:value", this.selectTags);
}
3、进入页面显示默认准备好的标签，支出：衣服、食物、住宿、出行，收入：工资、理财、兼职、零花钱， 下图是标签组件的内容
要求已进入就需要显示已准备的标签，如果在该组件的created钩子里面调用vuex的mutation里面的createTag函数去创建tag，会调用很多次alert导致用户体验极其差;
因此最后采用下图的方式加一个flag来判断是系统创建的还是人工创建的，以此来决定是否调用alert
4、选择日历上不同的时间，以及切换支出和收入来更新echarts饼图
方案一：
以下是统计页面，Tabs则是支出和收入的组件，Notes则是日历组件，Mycharts则是echarts组件
支出用“-”表示，收入用“+”表示因此在统计页面我们默认采用“-”，由于Tabs和Mycharts都采用.sync修饰符来传递type因此确保了type值是同步的Mycharts通过props，来接收参数，并且采用watch来进行监听如下图：
将变化的值赋值给当前组件对应的data，调用自定义函数updateChartsData以此根据type来更新数据，time时间也是如此
方案二：
由于该项目采用了vuex所以可以在state里声明type和time来做统一的数据管理，由于当前当前内容可复用性还不高所以可以暂时不用考虑，如在Tabs组件内点击支出或者收入按钮后，调用对应的commit去更新state的内容，在进入统计页面选择日期时或者切换按钮时，去获取相应的数据状态；
