Menu
I am trying to use a Vue.js plugin inside of a Vuex Store module.
In a component, I am able to call it like this: this.$plugin(). However, in a module, this is not set. I thought Vue.$plugin() would work since I initialize the plugin with Vue.use(plugin) and Vue being a global variable, but it doesn't.
How do I reference the plugin from a module?
686
The functionality of most plugins could be replicated with the Composition API, but Vuex does this better and with a more organized structure. The short answer is: Yes. Vuex is the preferred state management solution for Vue apps, and Vuex 4 is the version compatible with Vue 3.
In the previous Vuex tutorial, we learned that by default, getters, actions, and mutations inside modules are registered under the global namespace, which allows multiple modules to react to the same mutation or action.
Mapping in Vuex enables you to bind any of the state's properties, like getters, mutations, actions, or state, to a computed property in a component and use data directly from the state. Although we can get the job done with this. $store.state.user.data.name , we can use a map helper to simplify it to this.
The cleanest way I found is to import Vue in the store/module and then use the plugin via the Vue prototype.
import Vue from 'vue';
// .. in some logic
Vue.prototype.$dialog.alert('Something went wrong');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
