番茄记账Vue版

发表于

Vue 组件三种方式（单文件组件）

  1. 用 JS 对象

    export default {data,props,methods,created,...}

  2. 用 TS 类

    1
    2
    3
    4
    export default class 组件名 extends Vue {
      xxx: string = "hi";
      @prop(Number) xxx: number | undefined;
    }

  3. 用 JS 类 (和 TS 类似)

    export default class 组件名 extends Vue{xxx='hi'}

  4. vue-property-decorator

    更好的支持 TS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import Vue from 'vue';
    import {Component, Prop} from 'vue-property-decorator';
    @Component({
      components: {Button, FormItem},
    })
    export default class FormItem extends Vue {
      @Prop({default: ''}) readonly value!: string; //prop
      @Prop() options?: EChartsOption;
      ...
      get tags() {    //计算属性 computed
        return this.$store.state.tagList;
      }
      ...
      @Watch('options')   //watch
      onOptionsChange(newValue: EChartsOption) {
        this.chart && this.chart.setOption(newValue);
      }
    }

    搜集组件的数据

子组件触发事件,将数据发送到父组件

1
this.$emit("update:value", this.selectedTags);

默认数据可以是外部传入的 Prop，这样可以使用.sync 语法

1
<Tags :data-source.sync="tags" :value.sync="record.tags"/>

数据迁移

数据迁移

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取当前版本号
const version = window.localStorage.getItem("version");
//获取当前数据
const recordList: Record[] = JSON.parse(
  window.localStorage.getItem(recordList)
);
if ("version" === "0.0.1") {
  recordList.forEach((record) => {
    //遍历数据
    record.createTime = new Date(2020, 0, 1); //将每个数据增加时间
  });
  //保存数据
  window.localStorage.setItem("recordList", JSON.stringfy(recordList));
} else if ("version" === "0.0.2") {
  //迁移
}
//设置当前版本号
window.localStorage.setItem("version", "0.0.3");

迁移数据只需要将版本一个版本一个版本的向上迁移

定义 TS 类型

1
2
3
4
5
6
7
type RecordItem = {
  tags: string[];
  type: string;
  notes: string;
  amount: string;
  createdTime?: Date; // ?表示有也可能没有
};

可以将内容放在根目录独立文件中，全局定义，文件名以.d.ts结尾，cunstorm.d.ts,当前文件夹内容都可以使用

MVC

Model(模型):管理应用的行为和数据，响应数据请求（经常来自视图）和更新状态的指令

View(视图):管理作为位图展示到屏幕上的图形和文字输出；

Controller(控制器)：翻译用户的输入并依照用户的输入操作模型和视图

Vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import Vue from 'vue';
import Vuex from 'vuex';
import clone from '@/lib/clone';
import createId from '@/lib/createId';

Vue.use(Vuex);

const store = new Vuex.Store({
//存储数据  使用this.$store.state.recordList获取数据
  state: {
    recordList: [] as RecordItem[],
    createTagMessage: '',
    tagList: [] as Tag[],
    currentTag: undefined,
  } as RootStore,
//对数据的读写  没有返回值  使用this.$store.commit('fetchTags',参数)
  mutations: {
    setCurrentTag(state, id: string) {
      state.currentTag = state.tagList.filter(d => d.id === id)[0];
    },
    fetchTags(state) {},
    createTag(state, name: string) {
    },
    removeTag(state, id: string) {},
    saveTags(state) {},
    updateTag(state, object: { id: string; name: string }) {},
    fetchRecords(state) {},
    createRecord(state, record: RecordItem) {},
    saveRecord(state) {
      window.localStorage.setItem('recordList', JSON.stringify(state.recordList));
    }
  },
});
export default store;

使用多个:class

1
2
3
4
5
6
7
8
9
<li :class="value==='-' && 'selected'}"  //类名加引号 @click="selectType('-')">支出</li>

<li :class="{[classPrefix+'-item']:classPrefix,'selected':value==='-'}" @click="selectType('-')">支出</li>

{
//如果存在classPrefix 就存在前面的类名  如果类名存在变量，使用[]
[classPrefix+'-item']:classPrefix,
'selected':value==='-'
}