From 3838e926996697e7d19d4950fd5433eccba8b2e7 Mon Sep 17 00:00:00 2001
From: hsbtr <hsbtr@qq.com>
Date: Thu, 22 Apr 2021 23:30:59 +0800
Subject: [PATCH] Convert the Vuex event name determination to lowercase
 unformatted, allowing the user to determine the style

Improve Chinese documents
---
 README.zh-CN.md | 171 ++++++++++++++++++++++++++++++++++++++++++++++++
 package.json    |   2 +
 src/emitter.js  |  10 +--
 3 files changed, 178 insertions(+), 5 deletions(-)
 create mode 100644 README.zh-CN.md

diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..1f7f8c6
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,171 @@
+#### 安装  
+```bash
+npm install vue-socket.io --save
+```
+main.js 代码 
+```javascript
+import Vue from 'vue'
+import store from './store'
+import App from './App.vue'
+import VueSocketIO from 'vue-socket.io'
+
+const options = { path: '/my-app/' }; //Options object to pass into SocketIO
+
+Vue.use(new VueSocketIO({
+    debug: true,
+    connection: 'http://metinseylan.com:1992',
+    options: {
+        path: options.path
+    }
+  })
+);
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')
+```
+#### 局部使用 
+组件的话就在基础属性里加上`sockets` 对象， 里面写上自己要监听的事件名
+```javascript
+new Vue({
+    sockets: {
+        connect: function () {
+            console.log('socket connected')
+        },
+        customEmit: function (data) {
+            console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
+        }
+    },
+    methods: {
+        clickButton: function (data) {
+            // $socket is socket.io-client instance
+            this.$socket.emit('emit_method', data)
+        }
+    }
+})
+```
+#### 动态使用 
+如果你需要在运行时动态消费事件，你可以在Vue组件中使用' subscribe '和' unsubscribe '方法 
+```javascript
+
+mounted() {
+    this.sockets.subscribe('EVENT_NAME', (data) => {
+        this.msg = data.message;
+    });
+},
+beforeDestroy() {
+    this.sockets.unsubscribe('EVENT_NAME');
+}
+```
+#### vuex 模式 
+当你在安装中设置存储参数时，' Vue-Socket。io '将开始发送事件到Vuex商店。如果你为vuex设置了两个前缀，
+你可以同时使用' actions '和' mutations '。但是，最好的使用方法就是" actions "
+main.js 代码
+```javascript
+import Vue from 'vue'
+import store from './store'
+import App from './App.vue'
+import VueSocketIO from 'vue-socket.io'
+
+const options = { path: '/my-app/' }; //Options object to pass into SocketIO
+
+Vue.use(new VueSocketIO({
+    debug: true,
+    connection: 'http://metinseylan.com:1992', 
+    vuex: {
+      store,
+      actionPrefix: "socket_", // 默认值是大写的 SOCKET_
+      mutationPrefix: ""
+    },
+    options: {
+        path: options.path
+    }
+  })
+);
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')
+```
+store 代码
+```javascript
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { SOCKET_ERROE } from "./types"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state: {},
+    mutations: {
+        // 不建议在这里触发事件
+        [SOCKET_ERROE]() {
+            // do something
+        }
+    },
+    actions: {
+        socket_connect() {
+            // do something
+        }
+    }
+})
+```
+
+#### 原始事件
+event 事件
+注意： `socket_` 是vuex模式下的一个前缀， 插件内部默认值是大写，需要保持vuex里的事件命名风格请自己传一个前缀名 
+##### `socket_connect` 
+参数： 无
+在连接到命名空间时触发（包括成功的重新连接）
+
+##### `socket_error` 
+参数： `error` (Object)错误对象
+在发生连接错误时触发
+
+##### `socket_disconnect` 
+参数： `reason` (String) 错误提示
+断开连接时触发
+
+##### `socket_reconnect`
+参数：`attempt` (Number) 重新连接尝试次数
+重新连接成功后触发
+
+##### `socket_reconnect_attempt` 
+参数： `attempt` (Number) 重新连接尝试次数
+
+##### `socket_reconnecting` 
+参数： `attempt` (Number) 尝试链接次数
+尝试重新连接时触发
+
+##### `socket_reconnect_error` 
+参数： `error` (Object) 错误对象
+重新连接尝试错误时触发
+
+##### `socket_reconnect_failed` 
+参数：无
+无法在内部重新连接时触发`reconnectionAttempts`
+
+##### `socket_connect_error` 
+参数：`connect_error` (Object) 错误对象
+当发生名称空间中间件错误时触发
+
+##### `socket_connect_timeout` 
+参数： `timeout` (String) 时间
+在连接超时时触发
+##### `socket_connecting` 
+参数： 
+##### `socket_ping` 
+参数： 无
+当从服务器接收到ping数据包时触发
+
+##### `socket_pong` 
+参数： `ms` (Number) 自ping数据包以来经过的毫秒数 即等待时间
+当从服务器接收到一个Pong时触发
+
+
+注意： 此插件基于socket.io-client封装，在使用的时候一定要注意前后端的socket.io-client版本
+      如果自行升级了socket.io-client版本请注意查阅一下官方文档，3.x以上的版本有个别事件已删除
\ No newline at end of file
diff --git a/package.json b/package.json
index 9bf2c6a..2685f9d 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,8 @@
     "@babel/preset-env": "^7.1.0",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
+    "vue": "^2.6.12",
+    "vuex": "^3.6.2",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2"
   }
diff --git a/src/emitter.js b/src/emitter.js
index 8207541..490cb15 100644
--- a/src/emitter.js
+++ b/src/emitter.js
@@ -92,14 +92,14 @@ export default class EventEmitter{
     dispatchStore(event, args){
 
         if(this.store && this.store._actions){
-
-            let prefixed_event = this.actionPrefix + event;
+            //
+            let prefixed_event = this.actionPrefix.toLowerCase() + event;
 
             for (let key in this.store._actions) {
 
                 let action = key.split('/').pop();
 
-                if(action === prefixed_event) {
+                if(action.replace("_", "").toLowerCase() === prefixed_event.replace("_", "")) {
 
                     Logger.info(`Dispatching Action: ${key}, Data:`, args);
 
@@ -110,14 +110,14 @@ export default class EventEmitter{
             }
 
             if(this.mutationPrefix) {
-
+                // Converting native lowercase event names to uppercase is more Vuex compliant
                 let prefixed_event = this.mutationPrefix + event;
 
                 for (let key in this.store._mutations) {
 
                     let mutation = key.split('/').pop();
 
-                    if(mutation === prefixed_event) {
+                    if(mutation.replace("_", "").toLowerCase() === prefixed_event.replace("_", "")) {
 
                         Logger.info(`Commiting Mutation: ${key}, Data:`, args);