vue/cli3+typescript+vuex的一些简单使用

vue/cli3+typescript+vuex的一些简单使用(如有侵权，请联系我)

安装的过程就不用说了，相信到这里的大佬都是有一些水平的人(脚手架自带选项可以选择typescript支持)

1.vue-property-decorator的一些装饰器的使用

App.vue简单示例

vue-property-decorator提供如下七个装饰器和一个Mixins混合以及Vue类(来自官方)

@Component
@Prop
@Model
@Watch
@Emit
@Inject
@Provide
@Ref
Mixins (the helper function named mixins defined at vue-class-component)

<script lang="ts">
//首先要注意，这里的lang要改成ts才能支持ts写法，文件还是.vue文件
import {
     Component, Vue,Provide ,Emit,Watch,Prop，Model,Inject } from "vue-property-decorator";
import {
     Form } from 'element-ui';
@Component({
    //Component组件装饰器，用于增加一些全局的配置，如filters过滤器等
    components: {
    }//components这里放置一些全局的组件
})
export default class App extends Vue {
    //必须继承Vue这个类才能使用
   //这里写钩子函数，监听器，data，methods，计算属性等
   //可以在使用typescript的一些类的private public readonly get set等
   @Provide() private name:string = 'typescript';//定制属性，替换data,以后正常情况下直接这样使用，当然用data也是可以的，但是不推荐
   @Provide() private count:number = 20;
	//methods的写法就变成了一个简单的类的方法
	private clickConsoleName():void{
    
		console.log(this.name);
	}
   	//Emit 给父组件传值、触发父组件事件
   	//方式1
   	private onClickEmit():void{
    
		 @Emit("closeDialog",'触发事件传递给父组件的字符串')
	}
	//方式2
	@Emit("closeDialog",'触发事件传递给父组件的字符串')
	private onClickEmitTwo():void{
    
		 console.log('运行完毕这个方法，触发Emit')