如何从 nuxt.js 商店访问插件？

Question

我有这个 gtag（分析插件），我可以在我的组件上访问它，但不能在我的商店上访问它。如有任何意见，我将不胜感激。谢谢

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, commit }) {
    let res = await this.$UserApi.getUser()
    if (!(res instanceof User)) {
    } else {
      // I can access this on my components and pages but for some reason not here....
      console.log(this.$gtag)
    }
  }
}

Answer 1

您可以通过 Vuex 商店中的 this._vm 访问 Vue 实例，因此您只需要执行以下操作：

console.log(this._vm.$gtag)

这应该可以解决问题。

Answer 2

为了正确导入它，我将从 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;

现在您可以将其导入您的商店：

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

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

正如提到的其他答案，在当前的 Vuex 版本中，Vue 实例在商店内的 this._vm 下可用。不过，我不会依赖它，因为它不是公开的 Vuex API 的一部分，也没有在任何地方记录。换句话说，Vuex 开发者不保证它在未来的版本中仍然存在。
更具体地说，Vue 的承诺是所有 v2 代码都将在 v3 中工作。但前提是你使用暴露的 API's.

而且这里的讨论甚至没有关于它是否会被删除（很可能不会）。对我来说，这更像是一个原则问题：如果它以 _ 开头并且没有记录，它会转化为来自作者的消息：“我们保留随时更改它的权利时间，没有警告！"

Answer 3

根据 nuxtjs，插件在商店操作中可用。

https://nuxtjs.org/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 $.

如何从 nuxt.js 商店访问插件？

How to access plugin from nuxt.js store?

javascript

vue.js

vuex

nuxt.js

gtag.js