vue.js - 如何将全局对象 App 作为属性导入嵌套组件？

Question

我尝试从 webpack 在 VueJs 上构建单页应用程序。我有一个全局应用程序，我想在其中存储一些数据（整个应用程序的全局变量）。我想在嵌套组件的任何地方访问 App 全局对象（属性和方法）。

我试图将全局 App 设置为局部变量 app

import Block from "./Block";
    import App from "../../App";

    export default {
        name: 'Gallery',
        components: {Block},
        extends: Block,
        props: {
            block: Object
        },
        data() {
            return {
                title: "Gallery",
                app: App,
                editMode: false
            }
        },

        methods: {

            addPicture: function () {

                this.app.state.selectedBlock = this.block.id;
                this.app.state.showFilesStorage = true;

            },

        },
        computed: {}
    }

然后我调用我看到的 addPicture() 方法

TypeError: Cannot set property 'selectedBlock' of undefined

但是 App 有这个属性。我也想像这样从任何嵌套组件访问 App 方法的调用方法

this.app.getBlocks();

标签： vue.js