javascript - How to access plugin from nuxt.js store? - Stack Overflow

admin管理员组

文章数量:1287991

I have this gtag (analytics plugin) that I can access on my ponents but never on my store. I would appreciate any opinions. Thanks

plugins/vue-gtag.js

import Vue from "vue"
import VueGtag from "vue-gtag"

export default ({ app }, inject) => {
  Vue.use(VueGtag, {
    config: {
      id: process.env.ga_stream_id
    }
  })
}

store/gaUserProperty.js

import Vue from "vue"
import { User } from "~/models/user/User"

export const states = () => ({})

const getterObjects = {}
const mutationObjects = {}
Object.keys(states).forEach(key => {
  getterObjects[key] = state => state[key]
  mutationObjects[key] = (state, value) => (state[key] = value)
})

export const state = () => states

export const getters = { ...getterObjects }

export const mutations = { ...mutationObjects }

export const actions = {
  async sendUserProperties({ dispatch, mit }) {
    let res = await this.$UserApi.getUser()
    if (!(res instanceof User)) {
    } else {
      // I can access this on my ponents and pages but for some reason not here....
      console.log(this.$gtag)
    }
  }
}

I have this gtag (analytics plugin) that I can access on my ponents but never on my store. I would appreciate any opinions. Thanks

plugins/vue-gtag.js

import Vue from "vue"
import VueGtag from "vue-gtag"

export default ({ app }, inject) => {
  Vue.use(VueGtag, {
    config: {
      id: process.env.ga_stream_id
    }
  })
}

store/gaUserProperty.js

import Vue from "vue"
import { User } from "~/models/user/User"

export const states = () => ({})

const getterObjects = {}
const mutationObjects = {}
Object.keys(states).forEach(key => {
  getterObjects[key] = state => state[key]
  mutationObjects[key] = (state, value) => (state[key] = value)
})

export const state = () => states

export const getters = { ...getterObjects }

export const mutations = { ...mutationObjects }

export const actions = {
  async sendUserProperties({ dispatch, mit }) {
    let res = await this.$UserApi.getUser()
    if (!(res instanceof User)) {
    } else {
      // I can access this on my ponents and pages but for some reason not here....
      console.log(this.$gtag)
    }
  }
}

• javascript
• vue.js
• vuex
• nuxt.js
• gtag.js

Share Improve this question Follow edited Aug 16, 2020 at 20:52 Adrian Mole 51.9k191191 gold badges5858 silver badges9494 bronze badges asked Aug 16, 2020 at 20:30 obliviousfellaobliviousfella 44511 gold badge1111 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

To import this properly, I would export the instance (or any of its internals) from main.(ts|js):

const Instance = new Vue({...whatever});

// only export what you need in other parts of the app
export const { $gtag, $store, $t, $http } = Instance;

// or export the entire Instance
export default Instance;

now you can import it in your store:

import Instance from '@/main';
// or: 
import { $gtag } from '@/main';

// use Instance.$gtag or $gtag, depending on what you imported.

---

As other answers mentioned, in current Vuex version the Vue instance is available under this._vm inside the store. I'd refrain from relying on it, though, as it's not part of the exposed Vuex API and not documented anywhere. In other words, Vuex developers do not guarantee it will still be there in future versions.
To be even more specific, Vue's promise is that all v2 code will work in v3. But only if you use the exposed API's.

And the discussion here is not even on whether it will be removed or not (it most likely won't). To me, it's more a matter of principle: if it starts with a _ and it's not documented, it translates into a message from authors: "We're reserving the right to change this at any time, without warning!"

You can access the Vue instance through this._vm in the Vuex store, so you would just need to do:

console.log(this._vm.$gtag)

That should do the trick.

According to nuxtjs the plugins are available in the store actions.

https://nuxtjs/docs/directory-structure/plugins

Sometimes you want to make functions or values available across your app. You can inject those variables into Vue instances (client side), the context (server side) and even in the Vuex store. It is a convention to prefix those functions with a $.

本文标签： javascriptHow to access plugin from nuxtjs storeStack Overflow