Vue.js，使用插件方法

Question

我是第一次使用 Vue 构建 SPA。我将重用几个功能，但似乎无法使其工作。我收到错误"this.ExperienceToLevel is not a function"。

同时，我什至不确定创建插件是实现我想要实现的目标的最佳方式。也就是说，使一些函数成为全局的“Vue 方式”。我不想将其分配给 window，例如 window.UserLevel = new UserLevel()。

UserLevel.js

/*
Create Levels array
 */
let Levels = [];
for (let i = 0; i < 100; i++) {
    let xp = Math.floor(Math.pow(i, 1.3) * 100);
    Levels.push(xp);
}

/*
Create UserLevel Plugin
 */
const UserLevel = {
    install(Vue, options) {
        Vue.ExperienceToLevel = function (xp) {
            for (const [level, levelXP] of Object.entries(options.levels)) {
                if (levelXP > xp) {
                    return level-1;
                }
            }
        }

        Vue.LevelToExperience = function (level) {
            return options.levels[level];
        }

        Vue.ExperiencePercent = function (level) {
            return ((this.xp - this.LevelToExperience(this.level)) / (this.LevelToExperience(this.level + 1) - this.LevelToExperience(this.level))) * 100;
        }
    }
};

export {
    Levels,
    UserLevel
};

我尝试将插件导入到这样的组件中：

import { UserLevel, Levels } from './../../UserLevel';
Vue.use(UserLevel, { levels: Levels });

并像这样使用全局方法：this.ExperienceToLevel(this.xp)

Answer 1

根据Vue documentation on Plugins，你有两种选择：

在mixin 中声明这些方法：

const UserLevel = {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                ExperienceToLevel(xp) { ... },
                LevelToExperience(level) { ... },
                ExperiencePercent(level) { ... },
            }
        })
    }
};

或者将它们绑定到Vue.prototype:

Vue.prototype.$ExperienceToLevel = function (xp) { ... }
Vue.prototype.$LevelToExperience = function (level) { ... }
Vue.prototype.$ExperiencePercent = function (level) { ... }

我会选择前者。