Merge 3de1086696 into 8589bbfb65

README.md

@@ -27,12 +27,18 @@ Bind custom socket.io-client instance
 Vue.use(VueSocketio, socketio('http://socketserver.com:1923'));
 ```
 
-Enable Vuex integration
+Enable Vuex integration (use mutations)
 ``` js
 import store from './yourstore'
 Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store);
 ```
 
+Enable Vuex integration (use actoins)
+``` js
+import store from './yourstore'
+Vue.use(VueSocketio, socketio('http://socketserver.com:1923'), store, true);
+```
+
 #### On Vuejs instance usage
 ``` js
 var vm = new Vue({
@@ -94,6 +100,51 @@ export default new Vuex.Store({
 })
 ```
 
+Example store, socket actions always have "socket" prefix
+``` js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+const someModule = {
+  // ...
+  mutations: {
+    SOME_MUTATION: (state, payload) => {
+      // do something
+    }
+  }
+}
+
+const socketModule = {
+  state: {
+        connect: false,
+        message: null
+    },
+    mutations:{
+        CONNECT: (state,  status ) => {
+            state.connect = true;
+        },
+        USER_MESSAGE: (state,  message) => {
+            state.message = message;
+        }
+    },
+    actions: {
+        socketUserMessage: ({ commit, dispatch, state }, message) => {
+            commit(USER_MESSAGE, message);
+            commit(SOME_MUTATION, message);
+        }
+    }
+}
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+      someModule,
+      socketModule
+    }
+})
+```
+
 ## Example
 [Realtime Car Tracker System](http://metinseylan.com/)
 

src/Main.js

@@ -3,11 +3,11 @@ import Emitter from './Emitter'
 
 export default {
 
-    install(Vue, connection, store){
+    install(Vue, connection, store, useActions = false){
 
         if(!connection) throw new Error("[Vue-Socket.io] cannot locate connection")
 
-        let observer = new Observer(connection, store)
+        let observer = new Observer(connection, store, useActions)
 
         Vue.prototype.$socket = observer.Socket;
 

src/Observer.js

@@ -3,7 +3,7 @@ import Socket from 'socket.io-client'
 
 export default class{
 
-    constructor(connection, store) {
+    constructor(connection, store, useActions) {
 
         if(typeof connection == 'string'){
             this.Socket = Socket(connection);
@@ -11,7 +11,10 @@ export default class{
             this.Socket = connection
         }
 
-        if(store) this.store = store;
+        if(store) {
+            this.store = store;
+            this.useActions = useActions;
+        }
 
         this.onEvent()
 
@@ -21,17 +24,27 @@ export default class{
         this.Socket.onevent = (packet) => {
             Emitter.emit(packet.data[0], packet.data[1]);
 
-            if(this.store) this.commitStore('SOCKET_'+packet.data[0], packet.data[1])
+            if(this.store)
+                this.useActions
+                    ? this.dispatchStore('SOCKET_'+packet.data[0], packet.data[1])
+                    : this.commitStore('SOCKET_'+packet.data[0], packet.data[1])
 
         };
 
         let _this = this;
-
         ["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]
             .forEach((value) => {
                 _this.Socket.on(value, (data) => {
                     Emitter.emit(value, data);
-                    if(_this.store) _this.commitStore('SOCKET_'+value.toUpperCase(), data)
+                    if(_this.store) {
+                        const toCamelCase = (str) => str.split('_')
+                            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                            .join('')
+
+                        _this.useActions
+                            ? _this.dispatchStore('socket' + toCamelCase(value), data)
+                            : _this.commitStore('SOCKET_' + value.toUpperCase(), data)
+                    }
                 })
             })
     }
@@ -52,4 +65,15 @@ export default class{
 
     }
 
+    dispatchStore(type, payload){
+
+        if(type.search(/socket/) === 0){
+
+            if(this.store._actions[type])
+                this.store.dispatch(type, payload)
+
+        }
+
+    }
+
 }