在 vue 中使用 typescript(vuex使用, 组件注册,接口定义)
在vue项目中使用typescript,主要是vuex的使用,组件全局注册,接口的定义一项目搭建-----跳过(需要注意的是,如果不小心选择了语法检测,可在根目录下新建 vue.config.js 文件 里面添加如下)module.exports = {lintOnSave: false}二组件全局注册(定义的过滤器,指令等),主要介绍 vue.use()方法这...
·
在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
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)