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');
	}
	//监听route（路由）的变化触发这个方法
	//Watch 监听属性
	@Watch('$route') private handleRouteChange(to:any):void{
        this.initBreadCrumbItems(to);
    }
	// Prop 接收父组件传递的数据()里面定义接收的类型
	@Prop(Object) private Data!: any;//!表示这个值必须传，不然报错，强制性...
	//Model (组件之间)接收父组件双向数据绑定的数据,暂不做介绍
	
	//Inject注入 正常情况下使用Provide
	
	@Ref() public readonly loginForm!: Form;//创建一个Ref,然后这个属性注入到element-ui的Form节点上 ()内的参数是可以自选,也可以不传
	
	//计算属性,通过get来设置监听事件的变化
	public get count2 (){
        return this.count * 2;//当count发生变化的时候，count2也发生变化
    }
}
</script>

2.elementui样式按需加载， 参考官网的配置

cnpm i babel-plugin-component -D

3.添加.babelrc文件在根目录下,然后重新启动项目，就不需要引入elementui样式了

{
    "presets": [
        "@vue/app"
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]
}

4.引入vuex-class 装饰器写法引入vuex

cnpm i vuex-class -D

5.使用vuex-class(比较基本运用)

<script lang="ts">
import { Component, Vue ,Provide } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
@Component({})
export default class Index extends Vue {
	//注意：*这时候store里面必须要有user这个state、getUser这个getters方法、['SET_USER']这个mutations同步方法以及setUser这个actions异步方法
	@State('user') private user:any;//使用state，传入一个需要获取的state的key,获取user对象
    @Action("setUser") private setUser:any;//使用action，通过vuex的action方法传入括号内，从而获取到对应的方法setUser这个action异步方法,使用的话和使用方法一样，无需使用dispatch分发action
    // @Mutation("SET_USER") private setUser:any;Mutation和action类似用法，只需要引入调用即可
    // @Getter('getUser') private user:any;//和state一样的用法，获取后返回一个state数据
    public created() {
        this.setUser(localStorage.getItem(TS_TOKEN));
    }
}
</script>

vuex类型补充

//注意：GetterTree、MutationTree、ActionTree都是从vuex中导出的类型定义
//state 对象的类型，自定义，通过state里面的数据来定义类型
//getters 对象的类型是GetterTree泛型，需要传入两个参数，第一个是state的类型,第二个可以传递any
//mutations对象的类型是MutationTree泛型，只需要state的类型传入即可
//actions 对象的类型是ActionTree泛型，需要传入两个参数分别是state的类型，和第二个r类型，暂时传递给any吧，不清楚是什么，希望大佬能告诉我

vue的jsx语法书写,文件后缀位tsx(jsx语法支持)

//App2.tsx
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import Header from './components/Header';

@Component({})
export default class App extends Vue {
    private clickHandle(): void {
        (this as any).$toast({
            message: "Click Button Home",
            position: "bottom",
            duration: 1000
        });
    }
    @Provide() private value: string = '';
    @Provide() private count: number = 10;
    private addCount() {
        this.count++;
    }
    public get count2() {
        return this.count * 2;
    }
    public render() {
        return (
            <span>
                <div id="nav">
                    <router-link to="/">
                        <mt-button onClick={this.clickHandle} type="primary" size="small">Home</mt-button>
                    </router-link>
                    <router-link to="/about">
                        <mt-button type="danger" size="small">about</mt-button>
                    </router-link>
                    <h2>{this.count}</h2>
                    <mt-button onClick={this.addCount}>++</mt-button>
                    <h3>{this.count2}</h3>
                    <h3>------------------------</h3>
                    <input type="text" v-model={this.value} />
                    <h3>{this.value}</h3>
                    <h3 v-show={false}>模式:</h3>
                    <h3>{this.$router.mode}</h3>
                    <h3>子组件</h3>
                    <Test a={'dadsa'}>
                        <div slot="test-test">
                            这是插槽呢????
                        </div>
                    </Test>
                </div>
                <hr />
                <router-view />
                <Header />
            </span >
        );
    }
}
@Component({})
class Test extends Vue{
    @Prop() a!:string;
    public render() {
        // console.log(this.$props);
        return (
            <span class="test">
                ...????
                {
                    <slot name="test-test"></slot>
                }
            </span>
        );
    }
}

可以使用react的方式书写代码，唯一的不足是slot插槽，@事件，v-for，v-if ，v-html那些不能使用，只能使用v-show以及v-model的方式，和react的jsx的绑定事件方式，porps传参，emit等还是一样可以正常使用，如果想尝试的小伙伴可以试试，一样可以使用elementui和路由的标签

最后就可以直接使用了,如有不足请留言讨论回答