Блог

Главная - Вопросы по программированию - Прототип Vue во внешних файлах JS и доступ к хранилищу vuex $

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

#vue.js #module #prototype #vuex

#vue.js #модуль #прототип #vuex

Вопрос:

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

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

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

}

}

это моя основная точка входа, однако, когда я пытаюсь использовать его во внешнем модуле (prevent.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, подобном этому? Как мне внедрить хранилище во внешний модуль?

Комментарии:

1. Без прототипа должно работать: Vue.$preventAccess = функция

2. нет, это просто прерывает работу в другом месте приложения.

3. Возможно, вам придется создать плагин, чтобы делать то, что вы хотите: vuejs.org/v2/guide/plugins.html

Ответ №1:

Следуя документации здесь :https://v2.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);

Ответ №2:

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

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

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

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

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