mirror of
https://github.com/MetinSeylan/Vue-Socket.io.git
synced 2025-04-16 15:21:28 +02:00
Added support for namespaced vuex modules
This commit is contained in:
parent
45860773e4
commit
bcd466a22e
3 changed files with 33 additions and 20 deletions
|
@ -126,7 +126,7 @@ this.sockets.unsubscribe('EVENT_NAME');
|
|||
```
|
||||
|
||||
#### 🏆 Vuex Integration
|
||||
<p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
|
||||
<p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. The prefix for mutations and actions are both optional and will default to none. The prefix may be useful in differentiating what type of event should be sent to the store in the case of an action and mutation with the same name.</p>
|
||||
|
||||
``` javascript
|
||||
import Vue from 'vue'
|
||||
|
@ -149,6 +149,10 @@ export default new Vuex.Store({
|
|||
})
|
||||
```
|
||||
|
||||
##### Vuex Namespaced Modules
|
||||
<p>When using namespaced modules, the prefix, if one exists, will be parsed into the action name. For example, if the emitted event it `jobs/runTask` and the action prefix is `SOCKET_`, then the vuex action should be `SOCKET_runTask` in the jobs namespace. In this example the vuex store will receive the dispatched action: `jobs/SOCKET_runTask`.</p>
|
||||
|
||||
|
||||
#### 🏆 Connection Namespace
|
||||
<p>When you need to handle more than one namespaced connection, you need to set the `useConnectionNamespace` property of
|
||||
the options object to true. What this does is telling the plugin that you are going to be using more than one namespaced connection and you want to put every connection in their own `$socket` key.</p>
|
||||
|
|
8
dist/vue-socketio.js
vendored
8
dist/vue-socketio.js
vendored
File diff suppressed because one or more lines are too long
|
@ -4,10 +4,8 @@ export default class EventEmitter{
|
|||
|
||||
constructor(vuex = {}){
|
||||
Logger.info(vuex ? `Vuex adapter enabled` : `Vuex adapter disabled`);
|
||||
Logger.info(vuex.mutationPrefix ? `Vuex socket mutations enabled` : `Vuex socket mutations disabled`);
|
||||
Logger.info(vuex ? `Vuex socket actions enabled` : `Vuex socket actions disabled`);
|
||||
this.store = vuex.store;
|
||||
this.actionPrefix = vuex.actionPrefix ? vuex.actionPrefix : 'SOCKET_';
|
||||
this.actionPrefix = vuex.actionPrefix;
|
||||
this.mutationPrefix = vuex.mutationPrefix;
|
||||
this.listeners = new Map();
|
||||
}
|
||||
|
@ -91,19 +89,27 @@ export default class EventEmitter{
|
|||
*/
|
||||
dispatchStore(event, args){
|
||||
|
||||
if(this.store && this.store._actions){
|
||||
if(this.store) {
|
||||
|
||||
if(this.store._actions){
|
||||
|
||||
let prefixed_event = this.actionPrefix + event;
|
||||
let action_name = event;
|
||||
|
||||
for (let key in this.store._actions) {
|
||||
if (!!this.actionPrefix) {
|
||||
let namespace_sep_pos = event.lastIndexOf('/');
|
||||
action_name = (namespace_sep_pos !== -1) ? [event.slice(0, namespace_sep_pos+1), this.actionPrefix, event.slice(namespace_sep_pos+1)].join('') : this.actionPrefix + event;
|
||||
}
|
||||
|
||||
let action = key.split('/').pop();
|
||||
|
||||
for (let key in this.store._actions) {
|
||||
|
||||
if(action === prefixed_event) {
|
||||
if(key === action_name) {
|
||||
|
||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||
Logger.info(`Dispatching Action: ${key}, Data:`, args);
|
||||
|
||||
this.store.dispatch(key, args);
|
||||
this.store.dispatch(key, args);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
@ -111,15 +117,18 @@ export default class EventEmitter{
|
|||
|
||||
if(this.mutationPrefix) {
|
||||
|
||||
let prefixed_event = this.mutationPrefix + event;
|
||||
let mutation_name = event;
|
||||
|
||||
if (!!this.mutationPrefix) {
|
||||
let namespace_sep_pos = event.lastIndexOf('/');
|
||||
mutation_name = (namespace_sep_pos !== -1) ? [event.slice(0, namespace_sep_pos+1), this.mutationPrefix, event.slice(namespace_sep_pos+1)].join('') : this.mutationPrefix + event;
|
||||
}
|
||||
|
||||
for (let key in this.store._mutations) {
|
||||
|
||||
let mutation = key.split('/').pop();
|
||||
if(key === mutation_name) {
|
||||
|
||||
if(mutation === prefixed_event) {
|
||||
|
||||
Logger.info(`Commiting Mutation: ${key}, Data:`, args);
|
||||
Logger.info(`Committing Mutation: ${key}, Data:`, args);
|
||||
|
||||
this.store.commit(key, args);
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue