如何组织带有websocket突变的vuex

Question

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

目前，我处理存储/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-本机-websocket自述中

格式的'json' ： enabled ..。 如果数据上有.namespace，则将消息发送到这个namespaced: true存储区(请确保在存储模块中打开它)。 如果响应数据中有.mutation值，则使用名称SOCKET_[mutation value]调用相应的突变。 如果响应数据中有.action值，即。action: 'customerAdded'，相应的操作按名称调用： 操作：{ customerAdded (上下文){console.log(“接收到的操作:customerAdded”)}}

当使用json格式选项时：

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

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

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

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

当后端在前端定义处理程序时，应该由谁来处理消息，这难道不是一种糟糕的做法吗？

您的后端是否可供多个应用程序使用？那些不是你自己造出来的？如果不是，后端和前端是相同的应用程序。

通过只传递一个namespace属性并让前端处理它，可以避免后端过于冗长，但是只告诉操作也会更容易。这些都是通用的属性名，所以不太耦合。