Question

所以我想创建一个可以在我的每个组件中访问的全局函数。所以我偶然发现了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”。

从某种意义上说，我无法进入商店。用户登录后，商店才会获取值。

那么我有什么办法可以使全局函数在获取值时可以访问商店？

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

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

使全局功能可以访问vuex存储

1 个答案: