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
            }
          }
        })
      }
    }

当我尝试从我的vue模板运行$ pushNotifs方法将某些数据推送到$ notif.notifications时，模板不会更新（但其值已经更新）

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

如何让它对模板起反应？

Answer 1

我遵循了this的回答。基本上，您将创建一个类并使用新的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可让您访问所有数据，也可以显示我在此处显示的单个项目。

数据更改时，vue原型不会被动反应

1 个答案: