第二天vue2+ts学习上午

vuex-class

vuex-class是vuex和vue类组件的绑定助手，主要用于vue2.0+ts使用store的全局变量和方法

state.ts

export default{
toptype(state:any){
topType:false
}
getter.ts
```javascript
export default{
topType(state:any){
return  state.succed
}

mutations-type.ts

export const SET_TOP_TYPE='SET_TOP_TYPE'

mutations.ts

```javascript
import {SET_TOP_TYPE} from './mutations-type'
export default{
[SET_TOP_TYPE]{state:any
state.topType=flag
}
}

actions.ts

import {SET_TOP_TYPE} from './mutations-type'

引入vue-class

```javascript
import {State,Action,Mutation} from 'vuex-class'
export class MyComp extends Vue {
	@State private topType:boolean;
	@Action private setTopType:any;
	@Mutation private SET_TOP_TYPE:any;

save=>dependencies，–save-dev =>devDependencies

ts编译监视命令

tsc init tsc -w xxx

ts的数据类型

原有8个数据类型
tuple 元组 enum枚举 any 任意类型 never void

数组类型语法
方法一:
let arrHeros：string[]=[‘a’,‘b’,‘c’]
方法二
let arrHeros: Array=[‘a’,‘b’,‘c’]

tuole 元组监视一个已知元素数量，和每个元素的数组，内部的元素类型 不必相同

let tup1: [string, number, boolean] = ['ty!', 108, true]

特点:声明时，要指定元素的个数
声明时，要为每个元素规定类型

枚举

enum 枚举名

使用枚举类型来限制

enum Gender {
    Boy = 1,
    Gril = 2,
    Unknow = 3
}
console.log(Gender.Boy, Gender.Gril, Gender.Unknow);
//枚举不指定默认值
enum Gender2 {
    Boy,
    Gril,
    Unknow
}
console.log(Gender2.Boy, Gender2.Gril, Gender2.Unknow);
let userage: Gender = Gender.Boy
if (userage == Gender.Boy) {
    console.log('yse');
}

naver

//never不存在的指的类型用never 一般用于抛出异常或无限循环的函数返回类型
// never是ts种的底部类型

function test(): never {
    while (true) {

    }
}
function test2(): never {
    throw new Error('ty sg')
}

联合类型

表示取值可以为多种类型种的一种
let 变量名:变量类型1 |变量类型2=值；
例子

let dName：string |null=prompt('请输入gg的名字')
console.log('hello'+dname)

函数 |返回值和参数

function sayHi() {
    return 'hi old driver';
}
let res1 = sayHi();
function jumpSan(cityName) {
    console.log('兄弟，去哪里');
    console.log('去你的♥里');
}
jumpSan('pCHEN');

可选参数和占位默认值

剩余参数

ts类

//类 class-----------
class City {
    cName: string
    cLeval: number
    constructor(name: string, leval: number) {
        this.cName = name
        this.cLeval = leval
    }
    about() {
        console.log(`欢迎来到${this.cName},此地危险系数为${this.cLeval}`);
    }
}
let pCity = new City('Pchen', 9)
pCity.about()

localStorage操作

大小限制5m
受同源访问限制，不允许跨域访问
在浏览器隐私模式下无法使用
因为在本地保存，不会发送数据，网络爬虫无法抓取
只能存放字符串

本地存储方法