Свойство не определено с VueJS mixins

Question

Я пытаюсь использовать Mixins с Vue.js. Но с ними я сталкиваюсь с несколькими проблемами: /

Это мой текущий код для двух моих тестовых модулей:

ErrorBaseMixin.vue

<script>
    import ErrorAlert from './ErrorAlert';

    export const ErrorBaseMixin = {
        data() {
            return {
                // Errors management
                error_display: true,
                error_data: {
                    level: "warning",
                    time: 0,

                    status: 200,
                    message: ""
                }
            }
        },
        methods: {
            // ------------------------------------------------------------------------
            // Errors management functions
            // ------------------------------------------------------------------------
            error_function_show_error: function() {
                try {
                    this.$refs.error_component.launch();
                }
                catch {}
            },

            callback_error_catched: function(e) {
                if(e.message === 'Network Error'){
                    this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                    this.error_data.level = "danger";
                }
                else {
                    this.error_data.message = "An error occured : " + e.message;
                    this.error_data.level = "warning";
                }

                this.error_function_show_error();
            },
        },
        components: {
            ErrorAlert
        }
    }

    export default ErrorBaseMixin;
</script>

Test.vue

<template>
        <ErrorAlert
            :error_display="error_display"
            :error="error_data"
            ref="error_component"
        />
    </div>
</template>

<script lang="js">
    import {ErrorBaseMixin} from '../../../parts/ErrorBaseMixin.vue';

    export default {
        mixins: [ErrorBaseMixin],
        name: 'Test_elt',
        created() {
            this.REST_ADDR = "test/test";
        },
        data() {
            return {
                field: {
                    id: '55',
                    name: 'test'
                }
            }
        },
        methods: {

        }
    }
</script>

Но когда я компилирую последний модуль, в консоли браузера появляются следующие ошибки:

[Vue warn]: свойство или метод "error_data" не определены в экземпляр, на который ссылаются во время рендеринга. Убедитесь, что это свойство реактивный, либо в опции данных, либо для компонентов на основе классов, инициализация свойства.

[Vue warn]: неизвестный пользовательский элемент: - вы зарегистрировались компонент правильно? Для рекурсивных компонентов, убедитесь, что укажите опцию «имя».

Но ... Все работает нормально. Поэтому я не понимаю, почему у меня есть эти ошибки

Answer 1

Вы должны изменить ErrorBaseMixin.vue на ErrorBaseMixin.js:

import ErrorAlert from './ErrorAlert';

const ErrorBaseMixin = {
    data() {
        return {
            // Errors management
            error_display: true,
            error_data: {
                level: "warning",
                time: 0,

                status: 200,
                message: ""
            }
        }
    },
    methods: {
        // ------------------------------------------------------------------------
        // Errors management functions
        // ------------------------------------------------------------------------
        error_function_show_error: function() {
            try {
                this.$refs.error_component.launch();
            }
            catch {}
        },

        callback_error_catched: function(e) {
            if(e.message === 'Network Error'){
                this.error_data.message = "<strong>There was a network error :</strong> The connection is broken or the server is not started.";
                this.error_data.level = "danger";
            }
            else {
                this.error_data.message = "An error occured : " + e.message;
                this.error_data.level = "warning";
            }

            this.error_function_show_error();
        },
    },
    components: {
        ErrorAlert
    }
}

export default ErrorBaseMixin;

А затем импортируйте в ваш компонент:

import ErrorBaseMixin from '../../../parts/ErrorBaseMixin.vue';
export default {
    mixins: [ErrorBaseMixin],
...

Примечание: Позаботьтесь, как импорт и экспорт, я изменил способ.