Vue.js、プラグインメソッドを使用

Question

初めてVueでSPAを構築しています。私は2つの機能を再利用するつもりですが、機能させることができません。エラー"this.ExperienceToLevel is not a function"が表示されます。

同時に、私はプラグインの作成が私がしようとしていることを達成するための最良の方法であるとは確信していません。これは、いくつかの機能をグローバルに「Vueの方法」にすることです。私ウィンドウのように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 }); 

そしてそうのようなグローバルメソッドを使用します。Vue documentation on Pluginsによるとthis.ExperienceToLevel(this.xp)

Answer 1

を、次の2つのオプションがあります。

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) { ... } 

私は元となるだろう。