我创建使用VUE-CLI 3,并用打字原稿配置一个简单的Vue应用程序。我还装爱可信和我试图用它mounted()
以加载数据,并在组件中显示。
下面的代码:
<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import SearchBar from '@/components/prods_comp/SearchBar.vue';
import ProdsTable from '@/components/prods_comp/ProdsTable.vue';
@Component({
components: {
SearchBar,
ProdsTable,
},
})
export default class MainProds extends Vue {
@Prop({ default: 'Produits' }) private message!: string;
mounted() {
const baseURI = 'http://localhost:8069';
this.$http({
method: 'POST',
url: baseURI + '/vue_web_services/msg/',
headers: { 'content-type': 'application/json',},
data: {
}
}).then(function (response) {
console.log(response.data);
});
}
}
</script>
这是一个相当基本的API调用。有用。问题是这样的消息在控制台弹出保存:
ERROR in D:/ODOO/Vue/bons_commande/src/components/prods_comp/MainProds.vue
26:10 Property '$http' does not exist on type 'MainProds'.
24 | mounted() {
25 | const baseURI = 'http://localhost:8069';
> 26 | this.$http({
| ^
27 | method: 'POST',
28 | url: baseURI + '/vue_web_services/msg/',
29 | crossdomain: true,
编辑:这是main.ts:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueSweetalert2 from 'vue-sweetalert2';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/scss/tailwind.scss';
import axios from 'axios';
Vue.config.productionTip = false;
Vue.prototype.$http = axios;
Vue.use(ElementUI);
Vue.use(VueSweetalert2);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
它看起来像你可能会丢失vue-axios
,这增加$http
到Vue的原型,让this.$http()
从单个文件组件调用。
为了解决这个问题:
vue-axios
:
npm i -S vue-axios
main.ts
:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
做一个插件文件如下图所示,并使用这个插件在main.ts
对于详细的文档 - https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
import _Vue from 'vue';
import Axios from 'axios';
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
// do stuff with options
Vue.prototype.$http = Axios;
}
export class AxiosPluginOptions { // add stuff }
import { AxiosStatic } from 'axios';
declare module 'vue/types/vue' {
interface Vue {
$http: AxiosStatic;
}
}