vue.js - vue mixin 在实例和组件之间共享

Question

我有一些我想在我的网站上共享的功能。我的网站确实有多个 Vue 实例，而不仅仅是一个应用程序实例入口点。

我已经像这样创建了我的 mixin:

var fooMixin = {
    data: {
        someProperty: null,
        someOtherProperty: "Foo"
    },
    methods{
       ...
    }
}

然后将这个 mixin 注入(inject)到我的 Vue 实例中，如下所示:

new Vue({
    el: '#app',
    mixins: [fooMixin],
    data: {
        ...
    },
    methods: {
        ...
    }
})

当然，这完全符合预期，但我的问题是我想在其他地方的组件中重用这个 mixin。这会导致问题。

以下是它注入(inject)组件的方式:

Vue.component('bar', {
    props: ['someProp'],
    template: barTemplate,
    mixins: [fooMixin],
    data: function () {
        return {
            mySpecialProperty: null
        }
    },
    methods: {
        ...
    }
})

可以想象，mixin 不能与 data 合并。组件的属性。由于这是一个组件，因此 data 属性必须返回一个返回对象的函数。这不是我的 mixin 的设置方式。

这是我从 Vue 得到的错误:

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

我可以创建一个可跨实例和组件重用的 mixin 吗？

Answer 1

将 mixin 中的数据属性从对象更改为函数

var mixin = {
  data: function () {
    return {
      someProperty: null,
      someOtherProperty: 'foo'
    }
  }
}