nuxt.js 스토어에서 플러그인에 액세스하는 방법

nuxt.js 스토어에서 플러그인에 액세스하는 방법

이 gtag(분석 플러그인)는 컴포넌트에서는 액세스 할 수 있지만 스토어에서는 액세스 할 수 없습니다.어떤 의견이라도 주시면 감사하겠습니다.고마워요.

plugins/vue-gtag.syslog

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

이를 올바르게 Import하기 위해 인스턴스(또는 그 내부)를 에서 내보냅니다.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는 공개되지 않았고 문서화되어 있지 않기 때문에 이 API에 의존하지 않을 것입니다.즉, Vuex 개발자는 향후 버전에서도 Vuex가 계속 존재함을 보증하지 않습니다.
더 구체적으로 말하자면, Vue의 약속은v2코드가 동작합니다.v3단, 노출된 API를 사용하는 경우에만 해당됩니다.

그리고 여기서 논의되는 것은 그것이 제거될 것인가에 대한 것이 아니다(대부분 제거되지 않을 것이다).제겐 원칙의 문제죠. 만약 그게 시작된다면_문서화되어 있지 않습니다.저자가 보낸 메시지로 번역됩니다"우리는 경고 없이 언제든지 변경할 수 있는 권리를 보유하고 있습니다.

Vue 인스턴스에 액세스할 수 있습니다.this._vmVuex 스토어에서 다음 작업을 수행합니다.

console.log(this._vm.$gtag)

그것이 효과가 있어야 해요.

nuxtjs에 따르면 플러그인은 스토어 액션에서 사용할 수 있습니다.

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

앱 전체에서 함수나 값을 사용할 수 있도록 하고 싶은 경우가 있습니다.이러한 변수는 Vue 인스턴스(클라이언트 측), 컨텍스트(서버 측) 및 Vuex 스토어에 삽입할 수 있습니다.이러한 함수 앞에 $를 붙이는 것은 관례입니다.

언급URL : https://stackoverflow.com/questions/63441665/how-to-access-plugin-from-nuxt-js-store