Vue прототип не реагирует на изменения данных

Question

Я пытаюсь создать собственный плагин для хранения данных, чтобы использовать его как глобальный. это мой пользовательский плагин

    import {remove} from 'lodash'

    export const notifications = {
      install(Vue, options = {}) {
        Vue.prototype.$notifs = {
          count: 0,
          notifications: []
        }

        Vue.prototype.$pushNotifs = ({content, type, timeout}) => {
          Vue.prototype.$notifs.count++
          Vue.prototype.$notifs.notifications.push({content, type, timeout, id: Vue.prototype.$notifs.count})
        }

        Vue.prototype.$removeNotifs = ({id}) => {
          Vue.prototype.$notifs.notifications = remove(Vue.prototype.$notifs.notifications, (item) => item.id !== id)
        }

        Vue.mixin({
          computed: {
            $notifications() {
              return this.$notifs.notifications
            }
          }
        })
      }
    }

когда я пытаюсь запустить методы $ pushNotifs из моего шаблона vue для передачи некоторых данных в $ notif.notifications, шаблон не будет обновляться (но значение его там)

...
methods: {
      pushNotifs() {
        this.$pushNotifs({content: 'contoh content', type: 'success', timeout: 500})
        console.log(this.$notifs.notifications); // has the value
      }
    }
....

как сделать его реагирующим на шаблон?

Answer 1

Я следовал этот ответ. По сути, вы создаете класс и используете новый экземпляр Vue для обеспечения реактивности.

plugin.js:

import Vue from 'vue';
class Notif {
    constructor() {
        this.VM = new Vue({ 
            data: () => ({
                notifs: [],
                count: 0,
            }),
        });
    }
    get state() {
        return this.VM.$data;
    }

    get count() {
        return this.VM.$data.count;
    }
}

const notif = {
    Store: Notif,
    install (Vue, options) {
        Vue.mixin({
            beforeCreate() {
                this.$notif = options.store;
            }
        });
    },

};
export default waiter;

затем использовать (в main.js):

import notif from './plugins/plugin.js';

Vue.use(notif, {
    store: new notif.Store()
});

и доступ к нему:

this.$notif.state.notifs.push('some notif');

в шаблоне:

<span>{{$notif.count}}</span>

поэтому здесь state дает вам доступ ко всем данным, или вы можете выставлять отдельные элементы, как я показал здесь.