制作全局函数来访问vuex store答案

【问题标题】：Making global functions to access vuex store制作全局函数来访问vuex store
【发布时间】：2019-05-13 10:13:34
【问题描述】：

所以我想创建一个可以在我的每个组件中访问的全局函数。所以我偶然发现了 Vue 插件。他们工作得很好，直到我尝试了我的用例。我需要在我的插件中使用来自 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 is not defined”。

我无法访问商店是有道理的。商店只有在用户登录后才能获得价值。

那么我有什么办法可以创建一个全局函数，当它获取值时可以访问存储？

【问题讨论】：

标签： javascript vue.js ecmascript-6

【解决方案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)
    }
  }
}

您也可以使用global mixin 代替插件来做类似的事情。

【讨论】：