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

Question

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

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

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

这个 mixin 然后像这样注入到我的 Vue 实例中：

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

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

这是注入组件的方式：

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

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

这是我从 Vue 得到的错误：

[Vue 警告]：“数据”选项应该是一个在组件定义中返回每个实例值的函数。

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

Answer 1

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

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