vue使用vue-property-decorator，typeScript，自定义组件

script 指定了lang=‘ts’

<script lang="ts">

vue-class-component的@Component

@Component：是由vue-class-component提供的，装饰器修饰组件

vue-class-component：是官方推出的一个的包，可以以class的模式写vue组件。

一般使用是：

@Component
export default class HelloWorld extends Vue {}

此时的class HelloWorld就类似于一个Java类了，里面可以声明成员变量，函数等

export default是默认导出的意思，也就是说默认导出一个类，那么要导出的是类的时候，要使用@Component来修饰
也可以在@Component修饰中添加一些属性，比如：

@Component({
  components: {
    HelloWorld
  },
  props:{
    hey:String
  }
})
export default class HelloWorld extends Vue {}

main.ts

之前的Uniapp项目，挂载是在main.js中的，现在是main.ts中，这个文件最终还是会编译成为main.js文件

interface

接口一般用来定义一些规范，比如成员属性，函数等

成员

类中的成员，可以指定所属类型

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。是一个插件，在Vue项目中，要使用需要用到Vue.use(Vuex)

组件传参是非常麻烦的，Vuex将组件都要使用的状态抽取，以一个全局单例的模式管理，所有的组件都可以在这里获取要用的数据

一般会在大型应用的时候使用

Vuex有5个核心状态：

State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似于一个全局的data

vuex的基本数据，数据源存放地，数据是响应式的，用于定义共享的数据。

Mutation

提交更新数据的方法，唯一 一个可以操作state 中数据的方法，必须是同步的，第一个参数是state，第二个参数是commit传过来的数据

使用Vuex对象调用commit函数触发？或者使用辅助函数触发？

Action

Action和Mutation相似，一般不用Mutation 异步操作，若要进行异步操作，使用Action

原因：为了方便devtools打个快照存下来，方便管理维护

使用Vuex对象调用dispatch函数触发？或者使用辅助函数触发？

Getter

可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用。

也就是拿共享的数据进行参与计算，实际并没有修改共享数据的值

Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

vuex-module-decorators的@Module

vuex-module-decorators可以理解为Vuex的一种封包，提供了注解以方便使用，@Module也是一种对类的修饰，可以指定类的一些信息，比如

@Module({ name: 'messageStore', dynamic: true, namespaced: true, store })

类的名称，是否动态等

get xxx函数对应的是getter

其他的都是注解与关键字一一对应的

@Prop

父组件向子组件传递数据，指定类型【其实就是声明子组件要使用到的的字段】

public

ts中，public修饰的成员都能被外部访问

Vant

Vant组件添加

可以在page.json中全局引入了组件

例子详解

1：引入vue-property-decorator：

<script>中引入vue-property-decorator：

import {
	Component,
	Vue,
	Prop
} from 'vue-property-decorator'

2：使用接口对象

import { xxx } from './xxx'

3: 引用自定义组件

import xxx from './xxxx.vue'
@Component({
	components: {
		xxx
	}
})
export default class XzzzXzz extends Vue {....}

4：组件要接收的数据

export default class XzzzXzz extends Vue {
	@Prop({
		type: Array,
		default: []
	})
	data: Array < xxx>
}

问题记录

遇到的一个问题：

组件使用时不显示。

引入组件的方式是:

import xxx from './xxxx-yyyy.vue'
@Component({
	components: {
		xxx
	}
})

但是页面使用的时候，使用

<xxx :data="..."></xxx>

不显示，使用：

<xxxx-yyyy :data="..."></xxxx-yyyy>

这种方式才显示。原因还不知道