我有一个Vue组件,需要一个Vue mixin文件.所需的文件是供应商包的一部分,因此我无法修改该文件.我需要从mixin获取通知道具.最终结果是我将访问通知对象并获取读取通知量,以便将此计数显示为计算属性.似乎使用this.notifications不起作用.我怎样才能做到这一点？

这是我的组件：

var base = require('notifications/notifications');

Vue.component('spark-notifications',{

    mixins: [base],});

以下是上一个组件中所需的通知文件：

module.exports = {
    props: ['notifications','hasUnreadAnnouncements','loadingNotifications'],/**
     * The component's data.
     */
    data() {
        return {
            showingNotifications: true,showingAnnouncements: false
        }
    },methods: {
        /**
         * Show the user notifications.
         */
        showNotifications() {
            this.showingNotifications = true;
            this.showingAnnouncements = false;
        },/**
         * Show the product announcements.
         */
        showAnnouncements() {
            this.showingNotifications = false;
            this.showingAnnouncements = true;

            this.updateLastReadAnnouncementsTimestamp();
        },/**
         * Update the last read announcements timestamp.
         */
        updateLastReadAnnouncementsTimestamp() {
            this.$http.put('/user/last-read-announcements-at')
                .then(() => {
                    this.$dispatch('updateUser');
                });
        }
    },computed: {
        /**
         * Get the active notifications or announcements.
         */
        activeNotifications() {
            if ( ! this.notifications) {
                return [];
            }

            if (this.showingNotifications) {
                return this.notifications.notifications;
            } else {
                return this.notifications.announcements;
            }
        },/**
         * Determine if the user has any notifications.
         */
        hasNotifications() {
            return this.notifications && this.notifications.notifications.length > 0;
        },/**
         * Determine if the user has any announcements.
         */
        hasAnnouncements() {
            return this.notifications && this.notifications.announcements.length > 0;
        }
    }
};

Laravel刀片模板的开头：

    data: {
            user: Spark.state.user,teams: Spark.state.teams,currentTeam: Spark.state.currentTeam,loadingNotifications: false,notifications: null,supportForm: new SparkForm({
                from: '',subject: '',message: ''
            })
        },getNotifications() {
                this.loadingNotifications = true;

                this.$http.get('/notifications/recent')
                    .then(response => {
                        this.notifications = response.data;

                        this.loadingNotifications = false;
                    });
            },

require('spark-bootstrap');
require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});