Vuex Store 모듈에서 Vue.js 플러그인 사용

Vuex Store 모듈에서 Vue.js 플러그인 사용

나는 Vuex Store 모듈의 내부에 Vue.js 플러그인을 사용하려고 한다.

구성 요소에서는 다음과 같이 부를 수 있다.this.$plugin()그러나, 모듈에서는this설정되지 않음.내 생각에는 말이지…Vue.$plugin()플러그 인을 초기화하면Vue.use(plugin)그리고 Vue는 세계적인 변수지만 그렇지 않다.

모듈의 플러그인을 참조하는 방법은?

내가 찾은 가장 깨끗한 방법은 스토어/모듈에서 Vue를 가져온 다음 Vue 프로토타입을 통해 플러그인을 사용하는 것이다.

import Vue from 'vue';

// .. in some logic
Vue.prototype.$dialog.alert('Something went wrong');

이 질문은 버트가 여기에 제공된 예에서 답한 것이다: https://codesandbox.io/s/jp4xmzl0xy

    import Vue from 'vue'
    import App from './App'
    import Notifications from 'vue-notification'
    import Vuex from "vuex"
    Vue.use(Notifications)
    Vue.use(Vuex)
    
    let notifier = new Vue()
    
    
    const store = new Vuex.Store({
      state:{},
      actions:{
        notify(context, payload){
          notifier.$notify(payload)
        }
      }
    })
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      template: '<App/>',
      components: { App }
    })

인수로 vue 인스턴스 전달

다른 옵션은 작업에 대한 인수로 vue 인스턴스를 전달하는 것이다.

// Vue component
{
  methods: {
    const vm = this
    this.$store.dispatch('someaction', { vm })
  }
}

// Store action
{
  someaction (context, { vm }) {
    vm.$dialog.alert('Something went wrong')
  }
}

내가 찾은 다른 방법이 몇 가지 있어솔직히 어느 것이 최고인지 확실하지 않다.나는 Vue를 수입하고 프로토타입 메소드를 부르는 것을 정말 좋아하지 않는다.글로벌 Vue와 연계되어 localVue를 이용한 테스트에 있어서는 완전히 반대되는 것으로 보이며 특히 어렵다.

1. 이렇게 하면 안 되겠지만 다음 작업을 통해 스토어의 vue 인스턴스에 액세스할 수 있다.this._vm.$notify

2. 저장소 플러그인을 생성할 수 있음:

const notifyStore = (store) => {
  store.$notify = store._vm.$notify
}

3. 독립 실행형 모듈로 알림 생성

import Vue from 'vue'

let notifier = new Vue()

export default notifier

4. 둘의 조합

import notifier from './notifier'

const notifyStorePlugin = (store) => {
  store.$notify = notifier.$notify
}

나는 이것이 이것에 대한 결정적인 대답이라고 말하는 것이 아니다.나는 또한 피드백과 다른 제안들에 매우 개방적이다.

참조URL: https://stackoverflow.com/questions/47440010/use-vue-js-plugin-in-vuex-store-module