Vue.js，使用插件方法

Posted 2023-02-23

【中文标题】Vue.js，使用插件方法

【英文标题】：Vue.js, Use plugin methods

【发布时间】：2018-05-03 02:04:42

【问题描述】：

我是第一次使用 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)

【参考方案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)  ... 

我会选择前者。

【讨论】：

我也投票给前者。我刚刚注意到从模板调用原型方法会丢失this 对象。