Создание глобальных функций для доступа к vuex store

Question

поэтому я хочу создать глобальную функцию, к которой я смогу получить доступ в каждом своем компоненте.Так что я наткнулся на Vue Plugins.Они отлично работали, пока я не опробовал свой вариант использования.Мне нужно использовать некоторую информацию из хранилища vuex в моем плагине и вернуть значение true или false.

Так вот, что я пробовал

plugin.js

export default {
  install (Vue) {
    Vue.prototype.$rbac = (method, route) => {
      $store.state.generic.user.routes.some(m => m.method.includes(method) && m.route==route)
    }
  }
}

main.js

import plugin from './utils/common/plugin'
...
Vue.use(plugin)
...

component.vue

<template>
...
   <div v-if="$plug('post', '/project')></div>
...
</template>

Но я получаю сообщение об ошибке«ReferenceError: $ store не определено».

Имеет смысл, что я не могу получить доступ к хранилищу.Хранилище получает значение только после входа пользователя в систему.

Так есть ли способ сделать глобальную функцию, которая может получить доступ к хранилищу, когда оно получает значения?

Answer 1

Вы получаете ошибку ссылки, потому что переменная $store нигде не определена.Это не локальная переменная и не является параметром функции или глобальной переменной.

Вы, вероятно, хотели сделать this.$store;также убедитесь, что вы используете function () {} синтаксис, а не () => {}, потому что вы не хотите связывать this.

export default {
  install(Vue) {
    Vue.prototype.$rbac = function (method, route) {
      this.$store.state.generic.user.routes.some(m => m.method.includes(method) && m.route == route)
    }
  }
}

Вы также можете использовать глобальный миксин , чтобы сделатьаналогичная вещь вместо плагина.