import {componentA,componentB} from '@/components'; export default { components: { componentA, componentB}, props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] }, } // 组件数据 data () { return { message: 'Hello' } }, // 计算属性 computed: { reversedMessage () { return this.message.split('').reverse().join('') } // Vuex数据 step() { return this.$store.state.count } }, methods: { changeMessage () { this.message = "Good bye" }, getName() { let name = this.$store.getters['person/name'] return name } }, // 生命周期 created () { }, mounted () { }, updated () { }, destroyed () { } }
以上模版替换成修饰符写法则是：
import { Component, Vue, Prop } from 'vue-property-decorator'; import { State, Getter } from 'vuex-class'; import { count, name } from '@/person' import { componentA, componentB } from '@/components'; @Component({ components:{ componentA, componentB}, }) export default class HelloWorld extends Vue{ @Prop(Number) readonly propA!: number | undefined @Prop({ default: 'default value' }) readonly propB!: string @Prop([String, Boolean]) readonly propC!: string | boolean | undefined // 原data message = 'Hello' // 计算属性 private get reversedMessage (): string[] { return this.message.split('').reverse().join('') } // Vuex 数据 @State((state: IRootState) => state . booking. currentStep) step!: number @Getter( 'person/name') name!: name // method public changeMessage (): void { this.message = 'Good bye' }, public getName(): string { let storeName = name return storeName } // 生命周期 private created ()：void { }, private mounted ()：void { }, private updated ()：void { }, private destroyed ()：void { } }
正如你所看到的，我们在生命周期 列表那都添加 private XXXX 方法，因为这不应该公开给其他组件。
而不对 method 做私有约束的原因是，可能会用到 @Emit 来向父组件传递信息。
4.2 添加全局工具
引入全局模块，需要改 main.ts :
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount('#app');
npm i VueI18n
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; // 新模块 import i18n from './i18n'; Vue.config.productionTip = false; new Vue({ router, store, i18n, // 新模块 render: (h) => h(App), }).$mount('#app');
但仅仅这样，还不够。你需要动 src/vue-shim.d.ts ：
// 声明全局方法 declare module 'vue/types/vue' { interface Vue { readonly $i18n: VueI18Next; $t: TranslationFunction; } }
之后使用 this.$i18n() 的话就不会报错了。
4.3 Axios 使用与封装
Axios的封装千人千面
如果只是想简单在Ts里体验使用Axios，可以安装vue-axios
简单使用Axios
$ npm i axios vue-axios
main.ts添加：
import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
然后在组件内使用：
Vue.axios.get(api).then((response) => { console.log(response.data) }) this.axios.get(api).then((response) => { console.log(response.data) }) this.$http.get(api).then((response) => { console.log(response.data) })
1. 新建文件 request.ts
文件目录:
-api - main.ts // 实际调用 -utils - request.ts // 接口封装
2. request.ts 文件解析
import * as axios from 'axios'; import store from '@/store'; // 这里可根据具体使用的UI组件库进行替换 import { Toast } from 'vant'; import { AxiosResponse, AxiosRequestConfig } from 'axios'; /* baseURL 按实际项目来定义 */ const baseURL = process.env.VUE_APP_URL; /* 创建axios实例 */ const service = axios.default.create({ baseURL, timeout: 0, // 请求超时时间 maxContentLength: 4000, }); service.interceptors.request.use((config: AxiosRequestConfig) => { return config; }, (error: any) => { Promise.reject(error); }); service.interceptors.response.use( (response: AxiosResponse) => { if (response.status !== 200) { Toast.fail('请求错误！'); } else { return response.data; } }, (error: any) => { return Promise.reject(error); }); export default service;
为了方便，我们还需要定义一套固定的 axios 返回的格式，新建 ajax.ts ：
export interface AjaxResponse { code: number; data: any; message: string; }
3. main.ts 接口调用：