如何使用 websocket 突变组织 vuex

Question

我使用 vue+vuex+vue-native-websocket。根据使用 vuex 处理 websocket 消息的文档，我应该使用 SOCKET_... 突变。

目前我处理store/index.js文件中的所有消息，如下所示：

mutations: {
...
SOCKET_ONMESSAGE(): {
    switch(message.cmd) {
        case 'userRsp'
        ...
        case 'connectionRsp'
        ...
        case 'otherDataRsp'
        etc.
    }
}

我想是处理所有与用户相关的数据user.js的vuex模块，在所有连接数据connections.js vuex模块。

我应该在每个组件中使用 SOCKET_ONMESSAGE 吗？在这种情况下，根据我的测试 ON_MESSAGE 将被调用，即使对于消息不是用于的模块。

Answer 1

在vue-native-websocket 自述文件中：

使用格式：'json'启用

[...]

如果有.namespace数据，则消息将发送到该 namespaced: true商店（请务必在商店模块中将其打开）。

如果响应数据中有.mutation值，则使用名称调用相应的突变SOCKET_[mutation value]

.action如果响应数据中有一个值，即。action: 'customerAdded'，通过名称调用相应的动作：

actions: {
  customerAdded (context) {
    console.log('action received: customerAdded')
  }
}

使用json格式选项时：

Vue.use(VueNativeSock, 'ws://localhost:9090', { format: 'json' })

然后，您可以在响应中传递namespace和mutation或名称，它将调用商店模块中的正确函数。action

这是否意味着后端应该将名称空间属性插入到响应中？

是的。例如，后端应该发送namespace: "user"数据来调用同名的模块。

当后端在前端定义应该处理消息的处理程序时，这不是一个坏习惯吗？

您的后端是否可供多个应用程序使用？那些不是您自己构建的？如果不是，则后端和前端是同一个应用程序。

您可以通过仅传递属性namespace并让前端处理它来避免后端过于冗长，但也更容易告诉操作。这些是通用属性名称，因此耦合度不太高。