javascript - 为什么在挂载过程中组件中未定义这个全局本地 Vue 属性？

Question

我创建了一个自定义 Vue 插件，它在 Vue 上创建了一个全局属性，如下所示:

function (Vue, options) {
    Vue.$detector = new TranslatableStringDetector();
}

在我的组件中，我在计算属性中使用它，如下所示:

export default {
    // ...
    computed: {
        decoratedProfileName () {
            return this.$detector.decorate(this.$props.profileName);
        }
    }
    // ...
}

在 Karma/Mocha 测试中我是这样设置的:

before(() => {
            const localVue = createLocalVue();
            localVue.use(Vuex);
            localVue.use(TranslationDetector);

            store = new Vuex.Store(cloneDeep(storeDefinition));
            store.commit(SET_USER_DATA, userData);

            wrapper = shallowMount(Avatar, {
                localVue,
                store,
                propsData: {
                    id: 0,
                    inputElPrio: 2,
                    profileName: 'Default'
                }
            });
        });

shallowMount() 失败并显示以下错误消息:

[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'decorate' of undefined"
TypeError: Cannot read property 'decorate' of undefined
    at VueComponent.decoratedProfileName (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:132143:35)
    at Watcher.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71415:25)
    at Watcher.evaluate (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71522:21)
    at VueComponent.computedGetter [as decoratedProfileName] (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71780:17)
    at Object.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:70216:20)
    at Proxy.render (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:180100:43)
    at VueComponent.Vue._render (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:72817:22)
    at VueComponent.updateComponent (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71061:21)
    at Watcher.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71415:25)
    at new Watcher (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71404:12)
[Vue warn]: Error in render: "TypeError: Cannot read property 'decorate' of undefined"

found in

---> <Avatar> at src/components/controls/Avatar.vue
       <Root>
TypeError: Cannot read property 'decorate' of undefined
    at VueComponent.decoratedProfileName (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:132143:35)
    at Watcher.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71415:25)
    at Watcher.evaluate (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71522:21)
    at VueComponent.computedGetter [as decoratedProfileName] (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71780:17)
    at Object.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:70216:20)
    at Proxy.render (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:180100:43)
    at VueComponent.Vue._render (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:72817:22)
    at VueComponent.updateComponent (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71061:21)
    at Watcher.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71415:25)
    at new Watcher (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71404:12)

这怎么可能？通过 console.debug() 语句(Chrome 最近中断了调试)，我可以确认 localVue.$ detector 已正确设置。然而，在我的组件中，它不能作为 this.$Detector 使用。在示例中，这会导致“未定义”:

export default {
    // ...
    created: function () {
        console.debug(this.$detector);
    }
    // ...
}

Answer 1

被the Vue.js documentation误导我假设“全局”是指可供所有组件使用的单个对象。坚持文档，我实际上想要一个“实例方法”，它确实为所有组件呈现一个属性。这是一个很小但很重要的差异，可以解决问题。我之前尝试过并跳过了这种方法，因为其他东西不起作用。安装应该如下所示:

function (Vue, options) {
    Vue.prototype.$detector = new TranslatableStringDetector();
}