From 8de127066d307b547817707f4c98a44f0befed8e Mon Sep 17 00:00:00 2001 From: Fakhreev Rafael Date: Thu, 23 Feb 2017 12:31:42 +0300 Subject: [PATCH 1/2] on event dispatch store option --- src/Main.js | 4 ++-- src/Observer.js | 34 +++++++++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 7 deletions(-) diff --git a/src/Main.js b/src/Main.js index f19a820..4586cf6 100755 --- a/src/Main.js +++ b/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; diff --git a/src/Observer.js b/src/Observer.js index 76a71ce..cf55b8c 100755 --- a/src/Observer.js +++ b/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) + } }) }) } @@ -48,4 +61,15 @@ export default class{ } + dispatchStore(type, payload){ + + if(type.search(/socket/) === 0){ + + if(this.store._actions[type]) + this.store.dispatch(type, payload) + + } + + } + } From 3de10866964f58c32b287fc948b029c26dd300b5 Mon Sep 17 00:00:00 2001 From: Fl0pZz Date: Thu, 23 Feb 2017 12:47:01 +0300 Subject: [PATCH 2/2] Update README.md --- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 47eec3e..139767d 100755 --- a/README.md +++ b/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/)