Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/autom8-apps/vuex-module-listeners
https://github.com/autom8-apps/vuex-module-listeners
vue vuejs2 vuex vuex-plugin vuex3
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/autom8-apps/vuex-module-listeners
- Owner: autom8-apps
- License: mit
- Created: 2020-09-27T11:45:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-09T02:08:24.000Z (about 4 years ago)
- Last Synced: 2024-10-12T09:03:52.859Z (3 months ago)
- Topics: vue, vuejs2, vuex, vuex-plugin, vuex3
- Language: JavaScript
- Homepage:
- Size: 130 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuex Listeners
## Overview
One of the primary pain points I have with Vuex is that modules become more tightly coupled as your application grows. This is especially true when your application has multiple API requirements. This plugin attempts to solve that problem by utilizing vuex's mutation and action subscriber system into the options API of each vuex module you are interacting with.
## Installation
```bash
npm i vuex-module-listeners
```
## Usage
Please see Vuex Plugin documentation for further information on what plugin mutations and action events plugins can listen to [Vuex Plugin Events](https://vuex.vuejs.org/api/#subscribe). Regardless of module type (namespaced or global), every action or mutation triggered in a module fires of an event that plugins can listen to; including namespaced modules. You can use this system so that other modules who depend behavior of a module can listen in to the module. This leads to looser coupling when utilized properly.
**Requirements**
1. the name of a listener must match that of the mutation or event being triggered.
2. Since actions typically result in a mutation, it's best practice to avoid using actions if you can.
3. this plugin only invokes one listener and using name matching of the mutation and action can very quickly handle the listener. No need for a switch statement!
## Example Vuex Module
```js
export default {
mutations: {
SET_SUBSCRIPTION() {
...
}
},
actions: {
GET_SUBSCRIPTIONS() {
...
}
}
listeners: {
mutations: {
SET_SUBSCRIPTION(store, payload, state, router) {
return "mutation";
},
},
actions: {
before: {
GET_SUBSCRIPTIONS(store, payload, state, router) {
return "action.before";
},
},
after: {
GET_SUBSCRIPTIONS(store, payload, state, router) {
return "action.after";
},
},
},
},
};
```
### About namespaced modules
To listen to a namespaced module mutation or action you can name them listen to them like so:
```js
{
listeners: {
mutations: {
"namespaced/module": () => {}
},
actions: {
before: {
"namespaced/module": () => {}
},
after: {
"namespaced/module": () => {}
}
}
}
}
```
## Testing
```bash
npm run test
```
*There is also a default vscode launch config installed to run the visual studio code debugger when testing.*