TypeScript+VueCli3+Router+Vuex

前面分享过在cli2x下typescript的开发，这次分享的是目前比较贴近Vue3bate版本的cli3下的typescript开发不了解typescript的同学可以先去看看基本的typescript
跳过createVue阶段 我们直接看生产环境下的目录结构
与cli2下的目录我们不再做过多的比较，我们只看typeScript下文件的变化
1.main.ts 我们发现其实并没有什么变化

2.App.vue

作为路由页面初始化给出的入口很多同学喜欢直接在App下进行后续开发，我个人喜欢使用新建Home进行开发

忽略掉模板部分 我们看变化了的部分我们使用React与之比较，可以发现均可以使用class方式创建组件，Vue3Bate种也采用的是render(）方式进行渲染编译

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

作为创建组件的依赖被引入，Vue作为实例，Component作为当前实例的载体提供注册，使用方式
但需要注意的是@Component({})作为当前组件的引用载体无论内部有没有使用都需要在当前组件上声明，否在你的组件内部是没有this引用的
3.路由方面我们还是可以使用传统的方式创建路由，当然也提供了RouteConfig配置方案

4.组件内部方法，data的变化

typescript下不再有之前的定义当前组件内的变量等不再使用data(return{}) 这种方式，我们可以在组件内直接定义private showView : boolean= true; 变量的定义遵从严格的声明 例如 引用方式，名称，类型，值的方式 private，public，protected等引用方式分别代表了私有，公开，内公开的方式
5.组件通讯

这里我们使用Prop,Emit来说明，父子之间我们常常使用Prop来接收父组件传来的数据，对于一直的单项不更新状态数据的参数我们可以直接使用@Prop(Array) public menuList:any; 但多数时候数据状态都是需要更新的所以我们还要加上Watch来配合使用
例如我们需要在当前组件接收导航栏的数据 list 我们就需要写成

子组件触发类的我们可以使用Emit

        /**
         * @Description:使用emit接收同名父组件方法并使用调用函数返回

         * @Author: ShiWei

         * @Date: 2020-11-03
         */
        @Emit("selectUrl")
        private handleSelect(url:any):void {
            return url
        }

6.Vux
这里我们需要额外安装一个vuex-class页面目前typescript下推荐使用的Vuex构造方案
我们同样组从modules原则每个模块的store独立管理

在store的同级我们建一个viewStore创建我们的user.ts

import {Commit} from 'vuex'
const state:any={
      user:{}
}
//直接修改state的方式
const mutations:any= {
    setUser(states: any, payload: object) {
        states.user = payload;
    }
}
//执行异步操作间接修改state  action不能直接修改state
const actions:any={
    asyncSetUser(context:{commit:Commit},payload:object){
        context.commit('setUser',payload);
    }
}
export default {
    namespaced:true, //为true时视为私有化模块使用时需要声明引用模块名称 false时为全局
    state,
    mutations,
    actions
}

store/index.ts 引入注册我们创建的user.ts

import Vue from 'vue'
import Vuex from 'vuex'
import User from "@/viewStore/user";
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    User
  }
})

组件内使用

/**
       * @Description:登录

       * @Author: ShiWei

       * @Date: 2020-11-02
       */
      public submitLogin():void{
          (this.$refs.ruleForm2 as any).validate((valid:boolean) => {
              if (valid) {
                  let obj:any={
                      userName:this.loginForm.phone,
                      passWord:this.loginForm.pass
                  }
                  //想vuex内的setUser传入定义值
                  this.setUser(obj)
                  this.$router.push({ path:"/data_Main"})
              } else {
                  console.log('error submit!!');
                  return false;
              }
          });
      }

因为我们这里是同步切不需要做进一步处理所有我们只需要使用mutation就可以，mutation，action的区别请在user.ts中查看；
区别与以往我们是辅助函数import { mapGetters, mapMutations } from "vuex";因为在typescript中我们确实缺少直接使用的条件，当然可以使用但需要我们能将辅助函数写在


store也需要进一步改造，我们通过namespace 声明我们需要使用的store const userModule = namespace('User'); userModule就是我们当前模块使用的store的别名了；

//调用userModule下Mutations内方法
      @userModule.Mutation('setUser') setUser:any;

通过@userModule.Mutation('setUser') 我们声明了我们需要调用Mutation下的setUser方法，后面直接跟的setUser就是在当组件内的别名any是类型 我们可以直接使用泛型去定义防止粗心大意导致类型错误
在当前组件需要使用的时候我们可以直接使用 this.setUser(obj)

案例图：

源码下载地址链接：https://pan.baidu.com/s/1RdHRyPD4kciT5v9O-qHw-Q
提取码：hzqk