vue.js - 如何在普通的 javascrip 文件中使用 mixins（不是单个文件模板）

Question

在谷歌上搜索 vue mixins 时，我很惊讶有这么多关于这个主题的指南，但是所有的演示代码都使用了单个文件模板（或 vue 项目模板......）。那么如何在普通的javascript文件中使用vue mixins。我的情况是这样的：
首先，我使用 php-yii2 模板来开发我的网站（包括后端和前端）。在前端，我将 vue.js 文件添加到我的项目中以使用 vue 功能。有时，有一些可以重复使用的通用函数，所以我认为 vue mixins 可以解决这些情况。在我的方法中，我将创建一个单独的 .js 文件来声明 mixins 对象，然后其他 vue 对象（在其他 .js 文件中）可以重新使用该 mixins 对象方法。
你对我的案子有什么想法吗？太感谢了。

Answer 1

您的 mixin 定义（some-mixin.js）：

const someMixin = {
    computed: {
        aSharedComputed() {
            // do something
        }
    },
    methods: {
        aSharedMethod(aParam) {
            // do something
        }
    },
};

export {
    someMixin,
};

在组件 ( your-component.js) 中，您现在可以告诉组件您要使用此 mixin：

import { someMixin } from './some-mixin.js`; 

export default {
    name: 'SomeComponent',
    mixins: [
        someMixin
    ],
}

然后您可以使用您在模板中的 mixin 中定义的任何内容：

<span>{{ aSharedComputed }}</span>

还有代码：

methods: {
    someLocalMethod() {
        this.aSharedMethod();
        this.aSharedComputed;
    }
}