CODEWITHSUNDEEP
javascriptvue.jsecmascript-6
hrishikeshpaul
hrishikeshpaul

Reputation: 469

Making global functions to access vuex store

so I want to make a global function that I can access in every component of mine. So I stumbled upon Vue Plugins. They worked great, till I tried out my use case. I need to use some information from the vuex store in my plugin and return a true or false value.

So this is what I have tried

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>

But I get an error saying "ReferenceError: $store is not defined".

It kind of makes sense that I cannot access the store. The store only gets the value once the user logs in.

So is there any way I can make a global function that can access the store when it gets values?

Upvotes: 0

Views: 1832

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

You're getting the reference error because the $store variable hasn't been defined anywhere. It's not a local variable, nor is it a function parameter or global variable.

You probably meant to do this.$store; also make sure you use function () {} syntax and not () => {} because you don't want to bind 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)
    }
  }
}

You could also use a global mixin to do a similar thing instead of a plugin.

Upvotes: 1

Related Questions