Question

开发应用程序时遇到问题。我使用Vue + Vuetify和typescript，但我不想创建SPA应用程序或使用webpack来处理.vue组件，我需要创建几个页面，我每次创建新的Vue实例。但是当我创建例如

时

import * as Vue from 'Vue';
import axios from 'axios';

<any>window.vue = new Vue({
    el: "#app",
    data: {
        drawer: true,
        mini: false,
        totalItems: 0,
        items: [],
        headers: [,
            {
                text: 'Dessert (100g serving)',
                align: 'left',
                sortable: false,
                value: 'name'
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
        ],

    },
methods: {

    getData() {
        axios.get("http://exmaple1234.com/api/list")
            .then((response) => {
                this.$data["totalItems"] = 1;
                this.$data["items"] = [
                    {
                        value: false,
                        name: 'Frozen Yogurt',
                        calories: 159,
                        fat: 6.0,
                    }
                ];
            })
    }
},
mounted() {
    this.$options.methods["getData"].call("getData");

},
});

我的tsconfig.json

{
  "compilerOptions": {
    "alwaysStrict": true,
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": false,
    "target": "es5",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [ "es2017", "dom", "dom.iterable" ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": true
}

使用打字稿我不能使用this.totalItems，this.items而我无法在mounted（）中调用this.getData（），但是当我在浏览器中调试我的代码时，我看到了该对象＆＃34;这＆＃34;拥有所有这些属性和方法。

我使用属性$ data [＆＃34; property＆＃34;] name和$ options.methods [＆＃34; methodName＆＃34;]以便使用它，但我知道这不是正确的方法。我在Vue文档中读到了有助于创建接口或vue-class-component的ComponentOptions，但所有这些工具都使用了我想要避免的组件。

在这种情况下我可以使用vue + typescript吗？我很欣赏我的问题提示

Answer 1

我添加了一个Interface来描述所有数据属性和方法。添加this.getData(); / this.$options.methods["getData"].call(this);并创建一个新的vue实例。

import * as Vue from 'Vue';
import axios from 'axios';

interface AppInterface extends Vue {
    drawer: boolean,
    mini: boolean,
    totalItems: number,
    items: any,
    headers: any,
    getData (): void
}

var App = {
    el: "#app",
    data: {
        drawer: true,
        mini: false,
        totalItems: 0,
        items: [],
        headers: [{
                text: 'Dessert (100g serving)',
                align: 'left',
                sortable: false,
                value: 'name'
            }, {
                text: 'Calories',
                value: 'calories'
            }, {
                text: 'Fat (g)',
                value: 'fat'
            }
        ]
    },
    methods: {
        getData() {
            axios
                .get("http://exmaple1234.com/api/list")
                .then((response) => {
                    this.$data["totalItems"] = 1;
                    this.$data["items"] = [
                        {
                            value: false,
                            name: 'Frozen Yogurt',
                            calories: 159, 
                            fat: 6.0
                        }
                    ];  
                })
        }
    },
    mounted() {
        // or this.$options.methods["getData"].call(this);
        this.getData();
    }
} as Vue.ComponentOptions<AppInterface>

// new vue instance
new Vue(App);

不带组件的TypeScript Vue

1 个答案: