详解Vue3.0 前的 TypeScript 最佳入门实践

// 原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) => {								 
 11/13   首页 上一页 9 10 11 12 13 下一页 尾页