最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to use Vue plugin in Store? - Stack Overflow

programmeradmin1浏览0评论

Is there a proper / documented way of using a plugin inside vuex module or plain js module? I am using event bus to acheive it, not sure if it is the correct / best way. Please help.

Plugin1.plugin.js:

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

export default Plugin1;

In App.vue:

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

In store / plain-js module:

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

Is there a proper / documented way of using a plugin inside vuex module or plain js module? I am using event bus to acheive it, not sure if it is the correct / best way. Please help.

Plugin1.plugin.js:

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

export default Plugin1;

In App.vue:

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

In store / plain-js module:

const vue = new Vue();
const plugin1method = vue.plugin1method;
Share Improve this question edited Oct 26, 2018 at 4:31 JVM asked Oct 24, 2018 at 21:15 JVMJVM 9941 gold badge11 silver badges23 bronze badges 5
  • Plugins are typically used within Vue instances / ponents. It might help if you explain what plugin you're trying to use as some add static methods to the Vue class – Phil Commented Oct 24, 2018 at 22:59
  • If you are talking about Vuex plugins, have a look here: vuex.vuejs/guide/plugins.html. But I guess you are looking for using Vue plugins within Vuex. – wwerner Commented Oct 24, 2018 at 23:51
  • It is a plugin currently used in ponents. I want to use the same plugin in vuex – JVM Commented Oct 25, 2018 at 17:41
  • downvoter, please mention whats wrong in this question? I am working on a plex vue.js project and hold enough knowledge to ask legit questions. – JVM Commented Oct 25, 2018 at 22:47
  • I think @Daniel put it best in his answer below... "I can't tell you which way you should use it because I can't see how your function is defined in your plugin". Please add some more details to your question – Phil Commented Oct 26, 2018 at 2:47
Add a ment  | 

1 Answer 1

Reset to default 7

you can access your Vue instance using this._vm;
and the Vue global using import Vue from 'vue'; and then Vue;

I'm guessing you defined an instance method, so it would be the former (this._vm.plugin1method())


update

I can't tell you which way you should use it because it I can't see how your function is defined in your plugin.

However, here is an example that should illustrate the difference between instance and 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++;
    }
  }
});

when you mit the increment ie: this.$store.mit('increment') both methods will execute

发布评论

评论列表(0)

  1. 暂无评论