在 vue 中使用 typescript（vuex使用, 组件注册，接口定义）

在vue项目中使用typescript，主要是vuex的使用，组件全局注册，接口的定义

一 项目搭建-----跳过（需要注意的是，如果不小心选择了语法检测，可在根目录下新建 vue.config.js 文件 里面添加如下）

module.exports = {
    lintOnSave: false
  }

二 组件全局注册（定义的过滤器，指令等），主要介绍 vue.use()方法
这个use方法可接受一个参数（对象/函数），如果在参数上有一个 install方法，就会注册到vue中（简单描述，可能不是很完善），具体操作如下

1.通常会在src下新建 plugins 文件夹（表明此处为插件）
2.再新建 几个ts文件（components.ts / filter.ts）,需要导出的 myPlugins.ts
3.以 组件为例

第一步
components.ts

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
导出一个方法
export default function componentsInstall(): void {
    Vue.component('HelloWorld',HelloWorld)
}
第二步
myPlugins.ts
导入
import componentsInstall from './components'
定义一个方法
const myPlugins: any = () => {}
方法上添加install 方法
myPlugins.install = () =>{
    执行 组件安装方法
    componentsInstall();
}
export default myPlugins

第三步
main.ts
import Vue from 'vue'
import App from './App.vue'
import myPlugins from '@/plugins/myPlugins'

Vue.config.productionTip = false

//  自定义组件
Vue.use(myPlugins)

new Vue({
  render: h => h(App)
}).$mount('#app')

三 vuex的使用

由于在ts中，使用变量需要先对其进行 类型说明，所以通常会 先定义一个接口（相当于，先把需要的变量值，和类型先定义好，后直接使用），根据接口再来定义变量

先来看看 接口的定义

1.在src下 新建 typings 文件夹（定义需要用到的变量接口）–会自动注册到全局
2.以 store 使用为例，定义 store中 state需要使用的变量
注意 接口格式为 xxx.d.ts，本例子为 decTest.d.ts

声明     命名空间  decTest
declare namespace decTest {
     导出   接口       testItem
    export interface testItem {
        numA: number;
        numB: number;
    }  
    在store中会定义 两个 变量 numA和numB
}

3 在store中的使用

import { ActionTree,MutationTree,GetterTree } from 'vuex';

const state: decTest.testItem = {
    numA:0,
    numB:0
};
写了个getters 用来表示两个数相加  
关于 GetterTree<decTest.testItem, any>---我也没怎么搞懂。。。。

const getters:  GetterTree<decTest.testItem, any>  = {
    getNumAll: (state: decTest.testItem) => state.numA+state.numB
};
为 numA，numB 添加值
const mutations: MutationTree<decTest.testItem> = {
    setNumA(state:decTest.testItem,data:number) {
        state.numA=data
    },
    setNumB(state:decTest.testItem,data:number) {
        state.numB=data
    },
}

export default {
    namespaced:true,  避免名字相同
    state,
    getters,
    mutations
}

4 在页面中使用

<HelloWorld   :nowNumA="testA" :nowNumB="testB"  />
state 两个变量的赋值

import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {}
})
export default class Home extends Vue {
  private created() {}
  private mounted() {
   赋值 这里 使用的store模块写法
    setTimeout(()=>{
      this.$store.commit('testModules/setNumA',30)
      this.$store.commit('testModules/setNumB',20)
    },3000)
  }
  相当于 methods
  增加
  addNum(): void {
    this.$store.commit('testModules/setNumA',10)
  }
  减少
  reduceNum(): void {
    this.$store.commit('testModules/setNumB',0)
  }
  // 计算属性
get  testA(): number {
    return this.$store.state.testModules.numA
  };
  get testB(): number {
    return this.$store.state.testModules.numB
  }
}

5 两个变量的组件中

import { Component, Prop, Vue, Emit, Watch  } from "vue-property-decorator";
import { State, Action, Getter, namespace } from 'vuex-class';
@Component
export default class HelloWorld extends Vue {

  组件中props的

  @Prop({ default:0}) private nowNumA!: number;
  @Prop({default:0}) private nowNumB!:number;
  
  // 监听传 数值a变化
  @Watch('nowNumA')
  aChange(n: number,o: number) {
    console.log('新',n)
    console.log('旧',o)
  };
  // 计算属性 返回 模块中的 getters
  get nowNumAll(): void {
    return this.$store.getters['testModules/getNumAll']
  }
  // @Emit()--->未指定名字时候 相当于  this.$emit('get-type',item) 驼峰式
  @Emit()
  private getType (item:any) {
        return item
      }
}