Прототип Vue во внешних файлах JS и доступ к хранилищу vuex $

Question

Я настроил прототип vue

Vue.prototype.$preventAccess = function (role ) {

if(role === this.$store.state.role) {
// do some stuff

}

}

, но это находится в моей основной точке входа, однако, когда я пытаюсь использовать его во внешнем модуле (предотвращение. Js)

import store from '@store/store';
import Vue from 'vue';

export default function log({ next, to }) {
  console.log(Vue.prototype.$preventAccess('Editor'));
}

Я получаю сообщение об ошибке

Cannot read property 'state' of undefined

Могу ли я не использовать свой прототип во внешнем файле JS, как этот?Как ввести магазин во внешний модуль?

Answer 1

При использовании prototype у вас есть доступ к this, когда вы создаете объект на основе этого class.

При доступе к Vue.prototype.$preventAccess нет this, потому что нет экземпляра Vue, поэтому this не создано.

Ваш вызов будет работать, если вы создадите экземпляр Vue и вызовите $preventAccess в этом экземпляре.

var app = new Vue({
   el: "#app",
})
app.$preventAccess()

Теперь, $preventAccess определил this.

Answer 2

Следуя документации здесь: https://vuejs.org/v2/guide/plugins.html

MyPlugin.install = function (Vue, options) {

  // 4. add an instance method
  Vue.prototype.$preventAccess = function (role) {
    // some logic ...
  }
}

Vue.use(MyPlugin);