스토어에서 Vue 플러그인을 사용하는 방법

스토어에서 Vue 플러그인을 사용하는 방법

vuex 모듈 또는 플레인 js 모듈 내에서 플러그인을 사용하는 올바른/문서화된 방법이 있습니까?이벤트 버스를 이용하고 있습니다만, 이것이 올바른 방법인지 최선의 방법인지 잘 모르겠습니다.제발 도와주세요.

플러그인 1plugin.displays:

const Plugin1 = {
  install(Vue, options) {
    Vue.mixin({
      methods: {
        plugin1method(key, placeholderValues = []) {
          return key;
        },
      },
    });
  },
};

export default Plugin1;

App.vue의 경우:

Vue.use(Plugin1, { messages: this.plugin1data });

매장 내 / 플레인 js 모듈:

const vue = new Vue();
const plugin1method = vue.plugin1method;

를 사용하여 Vue 인스턴스에 액세스할 수 있습니다.this._vm;
및 Vue 글로벌 사용import Vue from 'vue';그리고 나서.Vue;

인스턴스 메서드를 정의하셨기 때문에 전자가 될 것입니다.this._vm.plugin1method())

---

갱신하다

플러그인에서 기능이 어떻게 정의되어 있는지 알 수 없기 때문에 어떤 방법으로 사용해야 하는지 알려드릴 수 없습니다.

단, instance와 global의 차이를 나타내는 예를 다음에 나타냅니다.

const myPlugin = {
  install: function(Vue, options) {
    // 1. add global method or property
    Vue.myGlobalMethod = function() {
      // something logic ...
      console.log("run myGlobalMethod");
    };
    Vue.mixin({
      methods: {
        plugin1method(key, placeholderValues = []) {
          console.log("run mixin method");
          return key;
        }
      }
    });
    // 4. add an instance method
    Vue.prototype.$myMethod = function(methodOptions) {
      console.log("run MyMethod");
      // something logic ...
    };
  }
};

Vue.use(Vuex);
Vue.use(myPlugin);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      this._vm.$myMethod();
      Vue.myGlobalMethod();
      this._vm.$options.methods.plugin1method();  // <-- plugin mixin custom method
      state.count++;
    }
  }
});

인크리먼트를 커밋하는 경우(예:this.$store.commit('increment')두 가지 방법이 모두 실행됩니다.

언급URL : https://stackoverflow.com/questions/52978013/how-to-use-vue-plugin-in-store