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 theVue
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
1 Answer
Reset to default 7you 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